@kws3/ui 2.2.3 → 2.2.5

package/CHANGELOG.mdx

@@ -1,3 +1,9 @@
+# 2.2.3
+  - `ScrollableList` - bugfixes, and add support for removing items without affecting scroll position
+
+# 2.2.4
+  - `ToggleButtons` - add support for count tags, and fix css not applying
+
 # 2.2.3
   - `ScrollableList` - add support for custom iteration key for keyed each block
 

package/controls/ToggleButtons.svelte

@@ -12,6 +12,7 @@ This property can be bound to, to fetch the current value, Default: `null`
 - `value`: Value of the button
 - `subtitle`: Optional subtitle
 - `icon`: Optional Icon to display
+- `count`: Optional number to display on top right
 - `active_class`: Custom class to apply when button is active
 - `inactive_class`: Custom class to apply when button is inactive
 
@@ -50,9 +51,10 @@ This property can be bound to, to fetch the current value, Default: `null`
           {/if}
           <span class="is-block">{option.name}</span>
           {#if option.subtitle}
-            <span
-              style="font-size: 0.7em; display: block; margin-top: -0.3em; opacity: 0.7;"
-              >{option.subtitle}</span>
+            <span class="option-subtitle">{option.subtitle}</span>
+          {/if}
+          {#if option.count}
+            <span class="count">{option.count}</span>
           {/if}
         </span>
       </button>
@@ -61,7 +63,7 @@ This property can be bound to, to fetch the current value, Default: `null`
 </div>
 
 <style lang="scss">
-  .toggle-buttons {
+  .kws-toggle-buttons {
     .button,
     .button:focus {
       :global(.icon) {
@@ -72,6 +74,31 @@ This property can be bound to, to fetch the current value, Default: `null`
         box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3) inset !important;
       }
     }
+    .button {
+      position: relative;
+      .option-subtitle {
+        font-size: 0.7em;
+        display: block;
+        margin-top: -0.3em;
+        opacity: 0.7;
+      }
+      .count {
+        position: absolute;
+        font-weight: 600;
+        font-size: 0.8em;
+        border-radius: 999px;
+        padding: 0.15em 0.2em;
+        min-width: 1.8em;
+        min-height: 1.5em;
+        top: -0.75em;
+        right: 0.2em;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background: #ca0303;
+        color: #fff;
+      }
+    }
   }
 </style>
 
@@ -102,6 +129,7 @@ This property can be bound to, to fetch the current value, Default: `null`
      * - `value`: Value of the button
      * - `subtitle`: Optional subtitle
      * - `icon`: Optional Icon to display
+     * - `count`: Optional number to display on top right
      * - `active_class`: Custom class to apply when button is active
      * - `inactive_class`: Custom class to apply when button is inactive
      *

package/helpers/ScrollableList.svelte

@@ -10,6 +10,7 @@
   @param {number} [end=0] - Last item index rendered inside viewport - readonly, Default: `0`
   @param {number} [end_threshold=10] - `end` event will be fired when the list reaches this many items before the end of the list., Default: `10`
   @param {number} [padding_threshold=5] - render 'n' number of items on outside the viewport (top and bottom) to avoid visible glitches on scrolling., Default: `5`
+  @param {number} [mutation_threshold=5] - Number of items that can be spliced in or out, before the scroll position resets, helpful for adding/removing list items in-place, Default: `5`
   @param {string} [style=""] - Inline CSS for scroller container, Default: `""`
   @param {string} [class=""] - CSS classes for scroller container, Default: `""`
 
@@ -81,9 +82,8 @@ while more items are loading
 </style>
 
 <script>
-  import { onMount, tick } from "svelte";
-  import { createEventDispatcher } from "svelte";
-  import { resizeObserver, hasResizeObserver } from "@kws3/ui/resizeObserver";
+  import { hasResizeObserver, resizeObserver } from "@kws3/ui/resizeObserver";
+  import { createEventDispatcher, onMount, tick } from "svelte";
 
   const fire = createEventDispatcher();
   /**
@@ -119,6 +119,10 @@ while more items are loading
      *  render 'n' number of items on outside the viewport (top and bottom) to avoid visible glitches on scrolling.
      */
     padding_threshold = 5,
+    /**
+     * Number of items that can be spliced in or out, before the scroll position resets, helpful for adding/removing list items in-place
+     */
+    mutation_threshold = 5,
     /**
      * Inline CSS for scroller container
      */
@@ -191,15 +195,16 @@ while more items are loading
       const row_height = height_map[i] || average_height;
       if (y + row_height > scrollTop) {
         start = i;
-        top =
-          y > row_height * padding_threshold
-            ? y - row_height * padding_threshold
-            : y;
+        let rhpt = row_height * padding_threshold;
+        let diff = y - rhpt;
+        top = y > rhpt && diff > i ? diff : y;
         break;
       }
       y += row_height;
       i += 1;
     }
+    i = 0;
+    y = 0;
     while (i < items.length) {
       y += height_map[i] || average_height;
       i += 1;
@@ -210,6 +215,7 @@ while more items are loading
     average_height = y / end;
     while (i < items.length) height_map[i++] = average_height;
     bottom = remaining * average_height;
+
     // prevent jumping if we scrolled up into unknown territory
     if (start < old_start) {
       await tick();
@@ -249,7 +255,11 @@ while more items are loading
 
   function reset() {
     if (!mounted) return;
-    if (!items.length || items.length < items_count) {
+    if (
+      !items.length ||
+      (items.length < items_count &&
+        items_count - items.length > mutation_threshold)
+    ) {
       item_height = null;
       start = 0;
       end = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "2.2.3",
+  "version": "2.2.5",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "svelte": "index.js",
@@ -35,5 +35,5 @@
   "devDependencies": {
     "typescript": "^5.0.4"
   },
-  "gitHead": "77b76e0e8ecbd1d9f282c67b62d944efafa5949b"
+  "gitHead": "7a85c9f2d6e4021ac05477ccda398d54064a4c13"
 }