@iamproperty/components 2.7.6 → 2.7.7

package/dist/components.umd.js

@@ -475,7 +475,6 @@ var addBodyClasses = body => {
  * @param {HTMLElement} element Dom element, this doesn't have to be the body but it is recommended.
  */
 
-
 var checkElements = element => {
   // Tables
   Array.from(element.querySelectorAll('table')).forEach((table, index) => {
@@ -488,7 +487,6 @@ var checkElements = element => {
  * @param {HTMLElement} table Dom table element
  */
 
-
 var tableWrap = table => {
   if (!table.parentNode.classList.contains('table__wrapper')) {
     var tableHTML = table.outerHTML;
@@ -500,7 +498,6 @@ var tableWrap = table => {
  * @param {HTMLElement} table Dom table element
  */
 
-
 var tableStacked = table => {
   var colHeadings = Array.from(table.querySelectorAll('thead th'));
   var colRows = Array.from(table.querySelectorAll('tbody tr'));
@@ -518,17 +515,23 @@ var tableStacked = table => {
     });
   });
 };
-
 var isNumeric = function isNumeric(str) {
   if (typeof str != "string") return false; // we only process strings!  
 
   return !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
   !isNaN(parseFloat(str)); // ...and ensure strings of whitespace fail
 };
-
 var zeroPad = (num, places) => String(num).padStart(places, '0');
-
-
+var helpers_ucfirst = str => str.charAt(0).toUpperCase() + str.slice(1);
+var helpers_ucwords = str => str.split(' ').map(s => helpers_ucfirst(s)).join(' ');
+var helpers_unsnake = str => str.replace(/_/g, ' ');
+var helpers_snake = str => str.replace(/ /g, '_');
+var helpers_safeID = function safeID(str) {
+  str = str.toLowerCase();
+  str = helpers_snake(str);
+  str = str.replace(/\W/g, '');
+  return str;
+};
 ;// CONCATENATED MODULE: ./assets/js/modules/table.js
 
 
@@ -540,7 +543,7 @@ function table(tableElement) {
   var sortedEvent = new Event('sorted');
   var filteredEvent = new Event('filtered');
   var reorderedEvent = new Event('reordered');
-  var randID = 'tabe_' + Math.random().toString(36).substr(2, 9); // Random to make sure IDs created are unique
+  var randID = 'table_' + Math.random().toString(36).substr(2, 9); // Random to make sure IDs created are unique
 
   var draggedRow;
   tableElement.setAttribute('id', randID); // #region Sortable
@@ -726,47 +729,6 @@ function table(tableElement) {
     var stopShowing = show * page;
     style.innerHTML = "\n    #".concat(randID, " tbody tr {\n      display: none;\n    }\n    #").concat(randID, " tbody tr:nth-child(").concat(startShowing, "),\n    #").concat(randID, " tbody tr:nth-child(").concat(startShowing, ") ~ tr{\n      display: block;\n    }\n    @media screen and (min-width: 36em) {\n      #").concat(randID, " tbody tr:nth-child(").concat(startShowing, "),\n      #").concat(randID, " tbody tr:nth-child(").concat(startShowing, ") ~ tr{\n        display: table-row;\n      }\n    }\n    #").concat(randID, " tbody tr:nth-child(").concat(stopShowing, ") ~ tr{\n      display: none;\n    }\n    ");
     tableElement.append(style);
-  };
-
-  var createPaginationForm = function createPaginationForm(show, page, totalRows) {
-    var form = document.createElement("div");
-    form.classList.add('table__pagination');
-    form.classList.add('row');
-    form.classList.add('pt-3');
-    form.classList.add('pb-3'); // Create the form and create a container div to hold the pagination buttons
-
-    form.innerHTML = "<div class=\"col mw-fit-content mb-3\">\n  <div class=\"form-control__wrapper form-control-inline mb-0\">\n    <label for=\"".concat(randID, "_showing\" class=\"form-label\">Showing:</label>\n    <input type=\"number\" name=\"").concat(randID, "_showing\" id=\"").concat(randID, "_showing\" class=\"form-control form-control-sm showing-input-field\" placeholder=\"\" list=\"").concat(randID, "_pagination\" value=\"").concat(show, "\" min=\"1\" max=\"").concat(totalRows, "\" />\n  </div>\n  <datalist id=\"").concat(randID, "_pagination\">\n  <option value=\"5\">5</option>\n  ").concat(totalRows > 10 ? "<option value=\"10\">10</option>" : '', "\n  ").concat(totalRows > 20 ? "<option value=\"20\">20</option>" : '', "\n  <option value=\"").concat(totalRows, "\">").concat(totalRows, "</option>\n  </datalist>\n</div>\n<div class=\"col mw-fit-content me-auto d-flex align-items-center mb-3\"><span class=\"label\">per page</span></div>\n<div class=\"col mw-fit-content d-sm-flex justify-content-end align-items-center\" id=\"").concat(randID, "_paginationBtns\"></div>"); // Add after the actual table
-
-    tableElement.append(form);
-  };
-
-  var createPaginationButttons = function createPaginationButttons(show, page, totalRows) {
-    var paginationButtonsWrapper = document.getElementById(randID + '_paginationBtns');
-    if (paginationButtonsWrapper == null) return false;
-    var numberPages = Math.ceil(totalRows / show);
-
-    if (numberPages == 1) {
-      // Remore the buttons or dont display any if we dont need them
-      paginationButtonsWrapper.innerHTML = '';
-    } else if (numberPages < 5) {
-      // If less than 5 pages (which fits comfortably on mobile) we display buttons
-      var strButtons = '';
-
-      for (var i = 1; i <= numberPages; i++) {
-        if (i == page) strButtons += "<li class=\"page-item active\" aria-current=\"page\"><span class=\"page-link\">".concat(i, "</span></li>");else strButtons += "<li class=\"page-item\"><button class=\"page-link\" data-page=\"".concat(i, "\">").concat(i, "</button></li>");
-      }
-
-      paginationButtonsWrapper.innerHTML = "<span class=\"pe-2 mb-3\">Page: </span><ul class=\"pagination mb-3\">\n        ".concat(page == 1 ? "<li class=\"page-item disabled\"><span class=\"page-link\">Previous</span></li>" : "<li class=\"page-item\"><button class=\"page-link\" data-page=\"".concat(parseInt(page) - 1, "\">Previous</button></li>"), "\n        ").concat(strButtons, "\n        ").concat(page == numberPages ? "<li class=\"page-item disabled\"><span class=\"page-link\">Next</span></li>" : "<li class=\"page-item\"><button class=\"page-link\" data-page=\"".concat(parseInt(page) + 1, "\">Next</button></li>"), "\n      </ul>");
-    } else {
-      // If more than 5 lets show a select field instead so that we dont have loads and loads of buttons
-      var strOptions = '';
-
-      for (var _i = 1; _i <= numberPages; _i++) {
-        if (_i == page) strOptions += "<option value=\"".concat(_i, "\" selected>Page ").concat(_i, "</option>");else strOptions += "<option value=\"".concat(_i, "\">Page ").concat(_i, "</option>");
-      }
-
-      paginationButtonsWrapper.innerHTML = "\n<div class=\"form-control__wrapper page-number mb-2\">\n<select class=\"form-select\">\n  ".concat(strOptions, "\n</select>\n</div>\n      ");
-    }
   }; // On page load check if the table should be paginated
 
 
@@ -777,13 +739,13 @@ function table(tableElement) {
 
     if (show < totalRows) {
       paginateRows(show, page);
-      createPaginationForm(show, page, totalRows);
-      createPaginationButttons(show, page, totalRows);
+      createPaginationForm(randID, tableElement, show, page, totalRows);
+      createPaginationButttons(randID, tableElement, show, page, totalRows);
       tableElement.addEventListener('change', function (e) {
         for (var target = e.target; target && target != this; target = target.parentNode) {
           if (target.matches('.table__pagination input[type="number"]')) {
             paginateRows(target.value, page);
-            createPaginationButttons(target.value, page, totalRows);
+            createPaginationButttons(randID, tableElement, target.value, page, totalRows);
             tableElement.setAttribute('data-show', target.value);
           }
         }
@@ -792,7 +754,7 @@ function table(tableElement) {
         for (var target = e.target; target && target != this; target = target.parentNode) {
           if (target.matches('.page-item:not(.active):not(.disabled) .page-link')) {
             paginateRows(tableElement.getAttribute('data-show'), target.getAttribute('data-page'));
-            createPaginationButttons(tableElement.getAttribute('data-show'), target.getAttribute('data-page'), totalRows);
+            createPaginationButttons(randID, tableElement, tableElement.getAttribute('data-show'), target.getAttribute('data-page'), totalRows);
           }
         }
       }, false);
@@ -800,7 +762,7 @@ function table(tableElement) {
         for (var target = e.target; target && target != this; target = target.parentNode) {
           if (target.matches('.table__pagination select')) {
             paginateRows(tableElement.getAttribute('data-show'), target.value);
-            createPaginationButttons(tableElement.getAttribute('data-show'), target.value, totalRows);
+            createPaginationButttons(randID, tableElement, tableElement.getAttribute('data-show'), target.value, totalRows);
           }
         }
       });
@@ -926,8 +888,8 @@ function table(tableElement) {
 
       if (_show < _totalRows) {
         paginateRows(_show, 1);
-        createPaginationForm(_show, 1, _totalRows);
-        createPaginationButttons(_show, 1, _totalRows);
+        createPaginationForm(randID, tableElement, _show, 1, _totalRows);
+        createPaginationButttons(randID, tableElement, _show, 1, _totalRows);
       }
     }
 
@@ -951,6 +913,45 @@ function table(tableElement) {
   }, false);
 }
 
+var createPaginationForm = function createPaginationForm(randID, tableElement, show, page, totalRows) {
+  var form = document.createElement("div");
+  form.classList.add('table__pagination');
+  form.classList.add('row');
+  form.classList.add('pt-3');
+  form.classList.add('pb-3'); // Create the form and create a container div to hold the pagination buttons
+
+  form.innerHTML = "<div class=\"col mw-fit-content mb-3\">\n<div class=\"form-control__wrapper form-control-inline mb-0\">\n  <label for=\"".concat(randID, "_showing\" class=\"form-label\">Showing:</label>\n  <input type=\"number\" name=\"").concat(randID, "_showing\" id=\"").concat(randID, "_showing\" class=\"form-control form-control-sm showing-input-field\" placeholder=\"\" list=\"").concat(randID, "_pagination\" value=\"").concat(show, "\" min=\"1\" max=\"").concat(totalRows, "\" />\n</div>\n<datalist id=\"").concat(randID, "_pagination\">\n<option value=\"5\">5</option>\n").concat(totalRows > 10 ? "<option value=\"10\">10</option>" : '', "\n").concat(totalRows > 20 ? "<option value=\"20\">20</option>" : '', "\n<option value=\"").concat(totalRows, "\">").concat(totalRows, "</option>\n</datalist>\n</div>\n<div class=\"col mw-fit-content me-auto d-flex align-items-center mb-3\"><span class=\"label\">per page</span></div>\n<div class=\"col mw-fit-content d-sm-flex justify-content-end align-items-center\" id=\"").concat(randID, "_paginationBtns\"></div>"); // Add after the actual table
+
+  tableElement.append(form);
+};
+var createPaginationButttons = function createPaginationButttons(randID, tableElement, show, page, totalRows) {
+  var paginationButtonsWrapper = document.getElementById(randID + '_paginationBtns');
+  if (paginationButtonsWrapper == null) return false;
+  var numberPages = Math.ceil(totalRows / show);
+
+  if (numberPages == 1) {
+    // Remore the buttons or dont display any if we dont need them
+    paginationButtonsWrapper.innerHTML = '';
+  } else if (numberPages < 5) {
+    // If less than 5 pages (which fits comfortably on mobile) we display buttons
+    var strButtons = '';
+
+    for (var i = 1; i <= numberPages; i++) {
+      if (i == page) strButtons += "<li class=\"page-item active\" aria-current=\"page\"><span class=\"page-link\">".concat(i, "</span></li>");else strButtons += "<li class=\"page-item\"><button class=\"page-link\" data-page=\"".concat(i, "\">").concat(i, "</button></li>");
+    }
+
+    paginationButtonsWrapper.innerHTML = "<span class=\"pe-2 mb-3\">Page: </span><ul class=\"pagination mb-3\">\n      ".concat(page == 1 ? "<li class=\"page-item disabled\"><span class=\"page-link\">Previous</span></li>" : "<li class=\"page-item\"><button class=\"page-link\" data-page=\"".concat(parseInt(page) - 1, "\">Previous</button></li>"), "\n      ").concat(strButtons, "\n      ").concat(page == numberPages ? "<li class=\"page-item disabled\"><span class=\"page-link\">Next</span></li>" : "<li class=\"page-item\"><button class=\"page-link\" data-page=\"".concat(parseInt(page) + 1, "\">Next</button></li>"), "\n    </ul>");
+  } else {
+    // If more than 5 lets show a select field instead so that we dont have loads and loads of buttons
+    var strOptions = '';
+
+    for (var _i = 1; _i <= numberPages; _i++) {
+      if (_i == page) strOptions += "<option value=\"".concat(_i, "\" selected>Page ").concat(_i, "</option>");else strOptions += "<option value=\"".concat(_i, "\">Page ").concat(_i, "</option>");
+    }
+
+    paginationButtonsWrapper.innerHTML = "\n<div class=\"form-control__wrapper page-number mb-2\">\n<select class=\"form-select\">\n".concat(strOptions, "\n</select>\n</div>\n    ");
+  }
+};
 /* harmony default export */ var modules_table = (table);
 ;// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??clonedRuleSet-82[0].rules[0].use[0]!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].rules[0].use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/elements/Table/Table.vue?vue&type=script&lang=js&
 //