@kws3/ui 1.7.1 → 1.7.2

package/CHANGELOG.mdx

@@ -1,3 +1,7 @@
+## 1.7.2
+ - `DatePicker` component: fix initialisation bug on mobile
+ - `Pagination` component: rename property `breakThreshold` -> `maxVisiblePages` plus bugfix and documentation update
+
 ## 1.7.1
  - `Skeleton` component: Illustrate in example the use of empty string for `color` prop.
  - `Pagination` component: Deprecate `meta` prop. And use separate props for `offset`, `limit`, `count` and `total` instead.
@@ -6,9 +10,8 @@
  - `Modal` component can now be opened and closed programatically via `open()` and `close()` methods.
  - Added linting rules for ESLint. And corrected all resulting issues.
 
-
 ## 1.7.0
-- Ensure uniform usage of $kws-theme-colors across all components, this means $kws-theme-colors can be independent of the global $colors SCSS variable.
+- Ensure uniform usage of `$kws-theme-colors` across all components, this means `$kws-theme-colors` can be independent of the global `$colors` SCSS variable.
 - `DataSearch` component: Expand filters to fill area when main search input is not present.
 - `DataSort` component: Increase click area for activating dropdown, and provide visual segementation between label and dropdown.
 - New `Skeleton` component.

package/datagrid/Pagination/Pagination.svelte

@@ -12,7 +12,7 @@
   @param {boolean} [showTotal=true] - Determines whether to show total or not, Default: `true`
   @param {boolean} [showCurrent=true] - Determines whether to show current page details, Default: `true`
   @param {boolean} [showPerPage=true] - Determines whether to show per page options, Default: `true`
-  @param {number} [breakThreshold=10] - Limit the number of visible pages in pagination, Default: `10`
+  @param {number} [maxVisiblePages=10] - Maximum number of consecutive pages to show in pagination after which a break is introduced in between them, Default: `10`
   @param {string} [entityName="entries"] - String to display total entries, Default: `"entries"`
   @param {''|'small'|'medium'|'large'} [size="small"] - Size of the pagination elements, Default: `"small"`
   @param {boolean} [frame=false] - Determines whether to show pagination frame or not, Default: `false`
@@ -180,9 +180,9 @@
      */
     showPerPage = true,
     /**
-     * Limit the number of visible pages in pagination
+     * Maximum number of consecutive pages to show in pagination after which a break is introduced in between them
      */
-    breakThreshold = 10,
+    maxVisiblePages = 10,
     /**
      * String to display total entries
      */
@@ -242,7 +242,7 @@
   $: totalItems = meta && _total ? _total : 0;
   $: currentPage = Math.floor(_offset / _limit);
   $: totalPages = Math.ceil(_total / (_limit || 1));
-  $: totalPages, currentPage, breakThreshold, calculatePages();
+  $: totalPages, currentPage, maxVisiblePages, calculatePages();
 
   function calculatePages() {
     pages = new Array(totalPages || 0);
@@ -251,10 +251,14 @@
       ret = [];
 
     for (var i = 0; i < total; i++) {
-      if (total > breakThreshold) {
-        if (i < 3) {
+      if (total > maxVisiblePages) {
+        let threshold = Math.max(
+          Math.floor(maxVisiblePages / 3),
+          Math.min(3, maxVisiblePages - 3)
+        );
+        if (i < threshold) {
           ret.push({ p: i });
-        } else if (i > total - 4) {
+        } else if (i >= total - threshold) {
           ret.push({ p: i });
         } else if (i === Math.floor(total / 2)) {
           ret.push({ p: i });
@@ -272,7 +276,7 @@
 
     let _prev = 0,
       items = []; // _prev was prev
-    if (total > breakThreshold) {
+    if (total > maxVisiblePages) {
       for (var j = 0; j < ret.length; j++) {
         var page = ret[j].p;
         if (page !== _prev + 1 && page !== 0) {

package/forms/actions.js

@@ -50,17 +50,19 @@ function createFlatpickrAction(defaultOpts, hooks) {
 
     function applyColorClass(instance, color) {
       let contains = false;
-      instance.calendarContainer.classList.forEach((c) => {
-        if (c.charAt(3).toLowerCase() === "is-") {
-          contains = c;
+      if (instance && instance.calendarContainer) {
+        instance.calendarContainer.classList.forEach((c) => {
+          if (c.charAt(3).toLowerCase() === "is-") {
+            contains = c;
+          }
+        });
+
+        if (contains) {
+          instance.calendarContainer.classList.remove(contains);
         }
-      });
 
-      if (contains) {
-        instance.calendarContainer.classList.remove(contains);
+        instance.calendarContainer.classList.add("is-" + color);
       }
-
-      instance.calendarContainer.classList.add("is-" + color);
     }
 
     function applyInitialInputAttributes(instance, { style }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -29,5 +29,5 @@
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "f9be2abdbb4f340ade0d47be929aac91381a5e4b"
+  "gitHead": "227e2a0e081adad79a4a46096d1f846bd307d6e3"
 }