@kws3/ui 2.1.3 → 2.2.0

package/CHANGELOG.mdx

@@ -1,3 +1,13 @@
+# 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
+  - fix Popperjs position strategy to work better on mobile by default, affects `SearchableSelect`, `MultiSelect` and `AutoComplete` components
+  - `ActionSheet` - Update styling to make it wokr better visually on desktop
+
+# 2.1.4
+  - Fix bug where disabled `Checkbox` components wrongly appeared as if they were checked
+  - Allow adding CSS classes to the input field in `NumberInput` component
+
 # 2.1.3
  - `PasswordInput` - add support for field `autocomplete` and `required`
  - `PasswordValidator` - fix `valid` field binding

package/controls/NumberInput.svelte

@@ -14,6 +14,7 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
   @param {boolean} [disabled=false] - Disables the NumberInput, Default: `false`
   @param {boolean} [fullwidth=false] - Forces the NumberInput to occupy the full width of it's container, Default: `false`
   @param {boolean} [typeable=true] - Allows typing the value into the input, Default: `true`
+  @param {string} [input_class=""] - Adds a css class to the input field, Default: `""`
   @param {string} [minus_icon="minus"] - Name of the icon that is to be displayed in the minus button, Default: `"minus"`
   @param {ColorOptions} [minus_icon_color=danger] - Color of the Minus Icon, Default: `danger`
   @param {ColorOptions} [minus_button_color=] - Color of the Minus Button, Default: ``
@@ -35,8 +36,8 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
   <input
     {style}
     data-testid="input"
-    class="input has-text-centered {klass} is-{size} is-{value < min ||
-    value > max
+    class="input has-text-centered {klass} {input_class} is-{size} is-{value <
+      min || value > max
       ? 'danger'
       : ''}"
     type="number"
@@ -67,8 +68,10 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
     </div>
     <div class="control is-{fullwidth ? 'expanded' : 'narrow'}">
       <input
+        style="z-index:1"
         data-testid="input"
-        class="input has-text-centered is-{size} is-{value < min || value > max
+        class="input has-text-centered {input_class} is-{size} is-{value <
+          min || value > max
           ? 'danger'
           : ''}"
         type="number"
@@ -172,6 +175,10 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
      * Allows typing the value into the input
      */
     typeable = true,
+    /**
+     * Adds a css class to the input field
+     */
+    input_class = "",
     /**
      * Name of the icon that is to be displayed in the minus button
      */

package/forms/AutoComplete.svelte

@@ -139,6 +139,7 @@ Default value: `<span>{option.label}</span>`
   /**
    * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
    * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   * @typedef {import('@kws3/ui/types').PopperStrategies} PopperStrategies
    */
 
   /**
@@ -213,6 +214,12 @@ Default value: `<span>{option.label}</span>`
    */
   export let disabled = false;
 
+  /**
+   * Placement strategy used by Popperjs, see popperjs docs
+   * @type {PopperStrategies}
+   */
+  export let popper_strategy = "absolute";
+
   /**
    * Where to render the dropdown list.
    * Can be a DOM element or a `string` with the CSS selector of the element.
@@ -330,7 +337,7 @@ Default value: `<span>{option.label}</span>`
 
   onMount(() => {
     POPPER = createPopper(el, dropdown, {
-      strategy: "fixed",
+      strategy: popper_strategy,
       placement: "bottom-start",
       // @ts-ignore
       modifiers: [sameWidthPopperModifier],

package/forms/select/MultiSelect.svelte

@@ -202,6 +202,7 @@ Default value: `<span>{option[search_key] || option}</span>`
   /**
    * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
    * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   * @typedef {import('@kws3/ui/types').PopperStrategies} PopperStrategies
    */
 
   /**
@@ -292,6 +293,11 @@ Default value: `<span>{option[search_key] || option}</span>`
    * Icon used to mark selected items in dropdown list
    */
   export let selected_icon = "check";
+  /**
+   * Placement strategy used by Popperjs, see popperjs docs
+   * @type {PopperStrategies}
+   */
+  export let popper_strategy = "absolute";
   /**
    * Shows only the number of items selected, instead of listing all the selected items in the input.
    */
@@ -524,7 +530,7 @@ Default value: `<span>{option[search_key] || option}</span>`
 
   onMount(() => {
     POPPER = createPopper(el, dropdown, {
-      strategy: "fixed",
+      strategy: popper_strategy,
       placement: "bottom-start",
       // @ts-ignore
       modifiers: [sameWidthPopperModifier],

package/forms/select/SearchableSelect.svelte

@@ -62,6 +62,7 @@ Default value: `<span>{option[search_key] || option}</span>`
   {remove_all_tip}
   async_search_prompt={value ? "Backspace to clear" : async_search_prompt}
   {no_options_msg}
+  {popper_strategy}
   {dropdown_portal}
   on:change={change}
   on:blur={blur}
@@ -87,6 +88,7 @@ Default value: `<span>{option[search_key] || option}</span>`
   /**
    * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
    * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   * @typedef {import('@kws3/ui/types').PopperStrategies} PopperStrategies
    */
 
   /**
@@ -169,6 +171,11 @@ Default value: `<span>{option[search_key] || option}</span>`
    * Tooltip text for the Clear selection button
    */
   export let remove_all_tip = "Clear Selection";
+  /**
+   * Placement strategy used by Popperjs, see popperjs docs
+   * @type {PopperStrategies}
+   */
+  export let popper_strategy = "absolute";
   /**
    * Where to render the dropdown list.
    * Can be a DOM element or a `string` with the CSS selector of the element.

package/helpers/ScrollableList.svelte

@@ -31,7 +31,9 @@ while more items are loading
     on:resize={resize}>
     <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-->
@@ -142,6 +144,7 @@ while more items are loading
 
   // whenever `items` changes, invalidate the current heightmap
   $: items, viewport_height, item_height, mounted, refresh();
+  $: items, reset();
 
   async function refresh() {
     if (!mounted) return;
@@ -232,4 +235,19 @@ while more items are loading
     rows = contents.getElementsByClassName("row");
     mounted = true;
   });
+
+  function reset() {
+    if (!mounted) return;
+    if (!items.length || items.length < items_count) {
+      item_height = null;
+      start = 0;
+      end = 0;
+      items_count = 0;
+      top = 0;
+      bottom = 0;
+      average_height;
+      padStart = 0;
+      padEnd = 0;
+    }
+  }
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "2.1.3",
+  "version": "2.2.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": "021ed6b77f9600a544b6fe567104887a0a3f0358"
+  "gitHead": "c65de99beeacf8cd4eee98bcc5cf82319fe086bf"
 }

package/styles/ActionSheet.scss

@@ -17,13 +17,20 @@ $kws-actionsheet-box-radius: $radius !default;
   box-shadow: $kws-actionsheet-box-shadow;
   position: fixed;
   bottom: 0;
-  left: 0;
   width: 100%;
   max-height: 90%;
   min-height: fit-content;
+  max-width: 650px;
+  margin: 0 auto;
   background: $kws-actionsheet-background;
   transition: all 0.3s;
   z-index: 50;
   padding: 1.25em 1.5em;
   overflow-x: auto;
 }
+@include mobile {
+  .kws-action-sheet {
+    left: 0;
+    max-width: 100%;
+  }
+}

package/styles/CheckRadio.scss

@@ -130,10 +130,16 @@ $kws-checkradio-focus-box-shadow-color: $input-focus-box-shadow-color !default;
     }
   }
 
-  input[type="checkbox"]:disabled + .kws-checkbox-label,
-  input[type="radio"]:disabled + .kws-checkbox-label,
   input[type="checkbox"]:disabled ~ .icon,
   input[type="radio"]:disabled ~ .icon {
+    opacity: 0;
+    cursor: not-allowed;
+  }
+
+  input[type="checkbox"]:disabled + .kws-checkbox-label,
+  input[type="radio"]:disabled + .kws-checkbox-label,
+  input[type="checkbox"]:checked:disabled ~ .icon,
+  input[type="radio"]:checked:disabled ~ .icon {
     opacity: 0.5;
     cursor: not-allowed;
   }

package/types/index.d.ts

@@ -7,6 +7,7 @@ import type {
   FontFamilies,
   FloatiePositions,
   TippyPositions,
+  PopperStrategies,
 } from "./type-defs";
 
 export type ColorOptions = (typeof Colors)[number];
@@ -17,6 +18,7 @@ export type FontFamilies = (typeof FontFamilies)[number];
 export type Positions = (typeof Positions)[number];
 export type TippyPositions = (typeof TippyPositions)[number];
 export type FloatiePositions = (typeof FloatiePositions)[number];
+export type PopperStrategies = (typeof PopperStrategies)[number];
 
 export type FloatieType = {
   create: (opts: object) => { props: object; destroy: () => void };

package/types/type-defs/index.d.ts

@@ -62,3 +62,5 @@ export const TippyPositions = [
   "auto-start",
   "auto-end",
 ] as const;
+
+export const PopperStrategies = ["fixed", "absolute"] as const;