@kws3/ui 4.0.3 → 4.1.0

package/CHANGELOG.mdx

@@ -1,3 +1,6 @@
+# 4.1.0
+  - New component `InfiniteList` Added
+
 # 4.0.3
   - `ScrollableList` - bugfixes, and add support for removing items without affecting scroll position
 
@@ -11,7 +14,10 @@
   - add svelte 4 compatibility
   
 --------------
-# 2.2.3
+# 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

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/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": "4.0.3",
+  "version": "4.1.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": "2c6e15b414cc4891bd0c018e76dfeecd4f80d171"
+  "gitHead": "d56d77bed1162551c0dcd4a82aefe4c392e6f716"
 }