@kws3/ui 2.2.4 → 2.3.0

package/CHANGELOG.mdx

@@ -1,3 +1,9 @@
+# 2.3.0
+  - New component `InfiniteList` Added
+
+# 2.2.5
+  - `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
 

package/helpers/InfiniteList.svelte

@@ -0,0 +1,136 @@
+<!--
+  @component
+
+
+  @param {array} [items=[]] - Array of items, Default: `[]`
+  @param {object} [iteration_key=null] - Iteration key - by default it uses the index of the array inside the keyed each block, Default: `null`
+  @param {string} [height="100%"] - Height of the wrapper, CSS String, Default: `"100%"`
+  @param {number} [end_offset=400] - `end` event will be fired when the scroll position reaches this many pixels from the end of the list., Default: `400`
+  @param {string} [style=""] - Inline CSS for scroller container, Default: `""`
+  @param {string} [class=""] - CSS classes for scroller container, Default: `""`
+
+  ### Events
+  - `end` - Fired when the scroll position reaches `end_offset` pixels from the end of the list.
+
+  ### Slots
+  - `<slot name="default" {item} {index} />` - Default slot for list view items
+  - `<slot name="loader"  />` - Optional slot to display a loading graphic at the bottom of the list
+while more items are loading
+
+-->
+{#if hasResizeObserver}
+  <div
+    bind:this={viewport}
+    class="kws-scrollable-list kws-infinite-list with-resize-observer {klass}"
+    on:scroll={handle_scroll}
+    style="height:{height};{style}"
+    use:resizeObserver
+    on:resize={resize}>
+    <div bind:this={contents}>
+      {#each visible as item (item.index)}
+        <div class="row">
+          <!--Default slot for list view items-->
+          <slot item={item.data} index={item.index} />
+        </div>
+      {/each}
+      <!--Optional slot to display a loading graphic at the bottom of the list
+        while more items are loading-->
+      <slot name="loader" />
+    </div>
+  </div>
+{:else}
+  <div
+    bind:this={viewport}
+    class="kws-scrollable-list kws-infinite-list {klass}"
+    on:scroll={handle_scroll}
+    style="height:{height};{style}"
+    bind:offsetHeight={viewport_height}>
+    <div bind:this={contents}>
+      {#each visible as item (item.index)}
+        <div class="row">
+          <!--Default slot for list view items-->
+          <slot item={item.data} index={item.index} />
+        </div>
+      {/each}
+      <!--Optional slot to display a loading graphic at the bottom of the list
+        while more items are loading-->
+      <slot name="loader" />
+    </div>
+  </div>
+{/if}
+
+<style>
+  .kws-infinite-list {
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    position: relative;
+    height: 100%;
+  }
+</style>
+
+<script>
+  import { hasResizeObserver, resizeObserver } from "@kws3/ui/resizeObserver";
+  import { createEventDispatcher } from "svelte";
+
+  const fire = createEventDispatcher();
+  /**
+   * Array of items
+   */
+  export let items = [],
+    /**
+     * Iteration key - by default it uses the index of the array inside the keyed each block
+     */
+    iteration_key = null,
+    /**
+     * Height of the wrapper, CSS String
+     */
+    height = "100%",
+    /**
+     *  `end` event will be fired when the scroll position reaches this many pixels from the end of the list.
+     */
+    end_offset = 400,
+    /**
+     * Inline CSS for scroller container
+     */
+    style = "";
+
+  /**
+   * CSS classes for scroller container
+   */
+  let klass = "";
+  export { klass as class };
+
+  // local state
+  let viewport,
+    contents,
+    viewport_height = 0,
+    visible,
+    fired = false;
+
+  $: visible = items.slice().map((data, i) => ({
+    index: iteration_key ? data[iteration_key] : i,
+    data,
+  }));
+
+  function handle_scroll() {
+    const { scrollTop, scrollHeight } = viewport;
+    let offset = scrollHeight - viewport_height - scrollTop;
+    // fire on:end event if we scrolled past the end_offset
+    if (offset <= end_offset) {
+      if (!fired) {
+        /**
+         * Fired when the scroll position reaches `end_offset` pixels from the end of the list.
+         */
+        fire("end");
+      }
+      fired = true;
+    } else {
+      fired = false;
+    }
+  }
+
+  const resize = () => {
+    viewport_height = viewport.offsetHeight;
+    handle_scroll();
+  };
+</script>

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/index.d.ts

@@ -16,6 +16,7 @@ export { default as TimelineHeader } from "./helpers/Timeline/TimelineHeader.sve
 export { default as Nl2br } from "./helpers/Nl2br.svelte";
 export { default as ClipboardCopier } from "./helpers/ClipboardCopier.svelte";
 export { default as ScrollableList } from "./helpers/ScrollableList.svelte";
+export { default as InfiniteList } from "./helpers/InfiniteList.svelte";
 export { default as FloatingUIOutput } from "./helpers/FloatingUI/FloatingUIOutput.svelte";
 export { default as Floatie } from "./helpers/FloatingUI/Floatie.svelte";
 export { default as ConfirmButton } from "./buttons/ConfirmButton.svelte";

package/index.js

@@ -18,6 +18,7 @@ export { default as TimelineHeader } from "./helpers/Timeline/TimelineHeader.sve
 export { default as Nl2br } from "./helpers/Nl2br.svelte";
 export { default as ClipboardCopier } from "./helpers/ClipboardCopier.svelte";
 export { default as ScrollableList } from "./helpers/ScrollableList.svelte";
+export { default as InfiniteList } from "./helpers/InfiniteList.svelte";
 export {
   alert,
   confirm,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "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": "5c19da7cfb0c75ceb4e6ec2822e0a84b26fe272b"
+  "gitHead": "85d7e7534391508f6376907b57142d2eba457d7e"
 }