@kws3/ui 2.2.0 → 2.2.2

package/CHANGELOG.mdx

@@ -1,3 +1,12 @@
+# 2.2.2
+  - `ScrollableList` - fix jumping issue when edge of scrollable regions are reached
+
+# 2.2.1
+  - `Icon` fix icon sizes when line-awesome icons are loaded
+  - `Icon` fix material icons when icon family is set globally
+  - `Icon` add support for adding custom icon families
+  - `Chart` fix, ensure ApexCharts is loaded before trying to initialise it
+
 # 2.2.0
   - Fix bug where `ScrollableList` component puts extra padding on top of list when fast scroll to top
   - `ScrollableList` - Fix bug to reset internal positioning props when data changes

package/canvas/ESignature.svelte

@@ -9,11 +9,14 @@
   @param {string} [background_image=""] - Background image for the canvas, Default: `""`
   @param {boolean} [readonly=false] - Determines whether canvas is readonly or not, Default: `false`
   @param {boolean} [disabled=false] - Determines whether canvas is disabled or not, Default: `false`
-  @param {string} [expand_from="center"] - The direction to which the canvas should expand, Default: `"center"`
-  @param {string} [expand_to="center"] - The direction to which the canvas should expand, Default: `"center"`
-  @param {number} [expand_scale=50] - Transform scale of the canvas on expansion, Default: `50`
-  @param {array} [actions=[]] - `CONST` List of actions toolbar, Default: `[]`
+  @param {string} [expand_from="center"] - The direction from which the canvas should expand.
+'top', 'bottom', 'left', 'right', 'center' and also 'n%', Default: `"center"`
+  @param {string} [expand_to="center"] - The direction to which the canvas should expand.
+'top', 'bottom', 'left', 'right', 'center' and also 'n%', Default: `"center"`
+  @param {number} [expand_scale=50] - Transform scale of the canvas on expansion
+value in percentage %, Default: `50`
   @param {Extract<Positions, 'start'|'center'|'end'>} [control_position=center] - Default position of controls, Default: `center`
+  @param {array} [actions=[]] - List of actions toolbar, Default: `[]`
 
 -->
 <Canvas
@@ -91,11 +94,7 @@
     /**
      * List of actions toolbar
      */
-    actions = [
-    "undo",
-    "redo",
-    "reset",
-    ];
+    actions = ["undo", "redo", "reset"];
 
-    let tools = { Pen };
+  let tools = { Pen };
 </script>

package/charts/Chart.svelte

@@ -116,6 +116,13 @@ This is to prevent unnecessary event subscriptions., Default: `[]`
   };
 
   const init = () => {
+    if (!ApexCharts) {
+      // `init()` was probably called from reactive functions instead of `onMount`.
+      // All those calls can be ignored, because when `onMount` calls it,
+      // it will have the latest data and config
+      return;
+    }
+
     chart && chart.destroy();
 
     if (typeof window !== "undefined") {

package/forms/AutoComplete.svelte

@@ -22,6 +22,7 @@ Fuzzy match will not work if `search` function is set, as the backend service is
   @param {string} [style=""] - Inline CSS for input container, Default: `""`
   @param {boolean} [readonly=false] - Marks component as read-only, Default: `false`
   @param {boolean} [disabled=false] - Disables the component, Default: `false`
+  @param {PopperStrategies} [popper_strategy=absolute] - Placement strategy used by Popperjs, see popperjs docs, Default: `absolute`
   @param {HTMLElement|string} [dropdown_portal=undefined] - Where to render the dropdown list.
 Can be a DOM element or a `string` with the CSS selector of the element.
 

package/forms/select/MultiSelect.svelte

@@ -30,6 +30,7 @@ Fuzzy match will not work if `search` function is set, as the backend service is
   @param {boolean} [readonly=false] - Marks component as read-only, Default: `false`
   @param {boolean} [disabled=false] - Disables the component, Default: `false`
   @param {string} [selected_icon="check"] - Icon used to mark selected items in dropdown list, Default: `"check"`
+  @param {PopperStrategies} [popper_strategy=absolute] - Placement strategy used by Popperjs, see popperjs docs, Default: `absolute`
   @param {boolean} [summary_mode=false] - Shows only the number of items selected, instead of listing all the selected items in the input., Default: `false`
   @param {string} [no_options_msg="No matching options"] - Message to display when no matching options are found, Default: `"No matching options"`
   @param {string} [async_search_prompt="Start typing to search..."] - Message to display in dropdown when async search can be performed, Default: `"Start typing to search..."`

package/forms/select/SearchableSelect.svelte

@@ -27,6 +27,7 @@ Fuzzy match will not work if `search` function is set, as the backend service is
   @param {string} [no_options_msg="No matching options"] - Message to display when no matching options are found, Default: `"No matching options"`
   @param {string} [async_search_prompt="Start typing to search..."] - Message to display in dropdown when async search can be performed, Default: `"Start typing to search..."`
   @param {string} [remove_all_tip="Clear Selection"] - Tooltip text for the Clear selection button, Default: `"Clear Selection"`
+  @param {PopperStrategies} [popper_strategy=absolute] - Placement strategy used by Popperjs, see popperjs docs, Default: `absolute`
   @param {HTMLElement|string} [dropdown_portal=undefined] - Where to render the dropdown list.
 Can be a DOM element or a `string` with the CSS selector of the element.
 

package/helpers/Icon.svelte

@@ -22,6 +22,17 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: ``
 </span>
 
 <style>
+  .fa-lg {
+    font-size: 1.33333333em;
+    line-height: 0.75em;
+    vertical-align: -15%;
+  }
+  .fa-2x {
+    font-size: 2em;
+  }
+  .fa-3x {
+    font-size: 3em;
+  }
   .icon .gg {
     transform: scale(0.75);
   }
@@ -117,7 +128,7 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: ``
     internal_size,
     usedFamily;
 
-  $: inner_icon = family === "material" ? icon : "";
+  $: inner_icon = usedFamily === "material" ? icon : "";
   $: {
     usedFamily = family !== "" ? family : globalFamily ? globalFamily : "fa";
 
@@ -140,9 +151,12 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: ``
       case "material":
         familyClass = "material-icons material-symbols-outlined ";
         break;
-      default:
+      case "fa":
         familyClass = "fa fa-";
         break;
+      default:
+        familyClass = usedFamily + "-";
+        break;
     }
   }
 

package/helpers/ScrollableList.svelte

@@ -54,7 +54,9 @@ while more items are loading
     bind:offsetHeight={viewport_height}>
     <div
       bind:this={contents}
-      style="padding-top: {top}px; padding-bottom: {bottom}px;">
+      style="padding-top: {start === 0
+        ? 0
+        : top}px; padding-bottom: {bottom}px;">
       {#each visible as item (item.index)}
         <div class="row">
           <!--Default slot for list view items-->
@@ -148,7 +150,7 @@ while more items are loading
 
   async function refresh() {
     if (!mounted) return;
-    const scrollTop = viewport.scrollTop;
+    const { scrollTop } = viewport;
     await tick(); // wait until the DOM is up to date
     let content_height = top - scrollTop;
     let i = start;
@@ -172,7 +174,7 @@ while more items are loading
   }
 
   async function handle_scroll() {
-    const scrollTop = viewport.scrollTop;
+    const { scrollTop } = viewport;
     const old_start = start;
     for (let v = 0; v < rows.length; v += 1) {
       height_map[start + v] = item_height || rows[v].offsetHeight;
@@ -183,7 +185,10 @@ 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;
+        top =
+          y > row_height * padding_threshold
+            ? y - row_height * padding_threshold
+            : y;
         break;
       }
       y += row_height;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "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": "c65de99beeacf8cd4eee98bcc5cf82319fe086bf"
+  "gitHead": "a4a85bf945292245105ccbe4057943bcea1e080f"
 }

package/types/index.d.ts

@@ -14,7 +14,7 @@ export type ColorOptions = (typeof Colors)[number];
 export type SizeOptions = (typeof Sizes)[number];
 export type ExtendedColorOptions = (typeof ExtendedColors)[number];
 export type BGColorOptions = (typeof BGColors)[number];
-export type FontFamilies = (typeof FontFamilies)[number];
+export type FontFamilies = (typeof FontFamilies)[number] | String;
 export type Positions = (typeof Positions)[number];
 export type TippyPositions = (typeof TippyPositions)[number];
 export type FloatiePositions = (typeof FloatiePositions)[number];