@kws3/ui 2.2.5 → 2.3.1

package/CHANGELOG.mdx

@@ -1,4 +1,12 @@
-# 2.2.3
+# 2.3.1
+  - `DatePicker` - add support for configurable border radius
+  - `DatePicker` - add support for configurable box shadow
+  - `DatePicker` - bug fix on date range selection colors
+
+# 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": "2.2.5",
+  "version": "2.3.1",
   "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": "7a85c9f2d6e4021ac05477ccda398d54064a4c13"
+  "gitHead": "c617cd16beda41c5cb580bb8b6d0e562ec07da50"
 }

package/styles/Datepicker.scss

@@ -1,6 +1,9 @@
 $kws-theme-colors: $colors !default;
 $kws-datepicker-background: $scheme-main-ter !default;
 $kws-datepicker-text: $text !default;
+$kws-datepicker-shadow: 0 2px 5px rgba(0, 0, 0, 0.3),
+  0 0 0 0.0625rem rgba(0, 0, 0, 0.1) !default;
+$kws-datepicker-radius: 0px !default;
 
 .flatpickr-calendar {
   $inRangeBg: lighten($kws-datepicker-text, 55);
@@ -8,10 +11,21 @@ $kws-datepicker-text: $text !default;
     $inRangeBg: darken($kws-datepicker-text, 55);
   }
 
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
+  box-shadow: $kws-datepicker-shadow;
   background: $kws-datepicker-background;
   color: $kws-datepicker-text;
 
+  border-radius: $kws-datepicker-radius;
+  .flatpickr-months {
+    border-radius: $kws-datepicker-radius $kws-datepicker-radius 0 0;
+    .flatpickr-month {
+      border-radius: $kws-datepicker-radius $kws-datepicker-radius 0 0;
+    }
+  }
+  .flatpickr-innerContainer {
+    border-radius: 0 0 $kws-datepicker-radius $kws-datepicker-radius;
+  }
+
   @each $name, $pair in $kws-theme-colors {
     $color: nth($pair, 1);
     $color-invert: nth($pair, 2);
@@ -94,6 +108,24 @@ $kws-datepicker-text: $text !default;
           color: $color-dark;
         }
       }
+
+      .flatpickr-day.inRange,
+      .flatpickr-day.prevMonthDay.inRange,
+      .flatpickr-day.nextMonthDay.inRange,
+      .flatpickr-day.today.inRange,
+      .flatpickr-day.prevMonthDay.today.inRange,
+      .flatpickr-day.nextMonthDay.today.inRange {
+        color: $color-dark;
+        background: $color-light;
+        border-color: $color-light;
+        box-shadow: -5px 0 0 $color-light, 5px 0 0 $color-light;
+      }
+      .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
+      .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
+      .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
+        box-shadow: -10px 0 0 $color;
+      }
+
       .flatpickr-innerContainer {
         border-bottom: 1px solid $color;
       }