@kws3/ui 2.0.4 → 2.0.5

package/CHANGELOG.mdx

@@ -1,5 +1,10 @@
+## 2.0.5
+ - `RangeSlider` - Expose native `input` event
+ - `RangeSlider` - Supports thumb color class `is-thumb-{color}`
+ - `AutoComplete`, `SearchInput`, `SearchableSelect` and `MultiSelect` - deprecated `scoreThreshold`, changed to `score_threshold`
+
 ## 2.0.4
- - `ToggleButtons` - set the value if not disabled and not the same value is set 
+ - `ToggleButtons` - set the value if not disabled and not the same value is set
 
 ## 2.0.3
  - Sveltkit compatibility fix ('window' not defined)

package/controls/RangeSlider.svelte

@@ -23,6 +23,7 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
 
   ### Events
   - `change` - Native input change event
+  - `input` - Native input event
 
 -->
 <div class="kws-range-control">
@@ -35,6 +36,7 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
     type="range"
     bind:value
     on:change
+    on:input
     {min}
     {max}
     {step}

package/forms/AutoComplete.svelte

@@ -15,7 +15,8 @@ Only send this prop if you want to fetch `options` asynchronously.
   @param {string|'fuzzy'|'strict'} [search_strategy="fuzzy"] - Filtered options to be displayed strictly based on search text or perform a fuzzy match.
 Fuzzy match will not work if `search` function is set, as the backend service is meant to do the matching., Default: `"fuzzy"`
   @param {boolean} [highlighted_results=true] - Whether to show the highlighted or plain results in the dropdown., Default: `true`
-  @param {number} [scoreThreshold=5] - Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches., Default: `5`
+  @param {number} [score_threshold=5] - Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches., Default: `5`
+  @param {number} [scoreThreshold=5] - (deprecated) Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches., Default: `5`
   @param {string|''|'small'|'medium'|'large'} [size=""] - Size of the input, Default: `""`
   @param {string|''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the input, Default: `""`
   @param {string} [style=""] - Inline CSS for input container, Default: `""`
@@ -183,7 +184,12 @@ Default value: `<span>{option.label}</span>`
    * Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches.
    * @type {number}
    */
-  export let scoreThreshold = 5;
+  export let score_threshold = 5;
+  /**
+   * (deprecated) Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches.
+   * @type {number}
+   */
+  export let scoreThreshold = score_threshold;
   /**
    * Size of the input
    *  @type {import('@kws3/ui/types').SizeOptions}

package/forms/SearchInput.svelte

@@ -10,7 +10,8 @@
   @param {array} [options=[]] - Array of objects., Default: `[]`
   @param {array} [searchableKeys=[]] - array of object properties to search in., Default: `[]`
   @param {boolean} [highlighted_results=true] - Whether to show the highlighted or plain results in the dropdown., Default: `true`
-  @param {number} [scoreThreshold=2] - Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches., Default: `2`
+  @param {number} [score_threshold=2] - Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches., Default: `2`
+  @param {number} [scoreThreshold=2] - (deprecated) Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches., Default: `2`
   @param {boolean} [word_match=false] - Whether to match against each word seperatly or whole sentence in flow., Default: `false`
   @param {string} [style=""] - Inline CSS for the input, Default: `""`
   @param {string} [class=""] - CSS classes for the input, Default: `""`
@@ -87,9 +88,14 @@
 
   /**
    * Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches.
-   *  @type {number}
+   * @type {number}
    */
-  export let scoreThreshold = 2;
+  export let score_threshold = 2;
+  /**
+   * (deprecated) Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches.
+   * @type {number}
+   */
+  export let scoreThreshold = score_threshold;
   /**
    * Whether to match against each word seperatly or whole sentence in flow.
    */

package/forms/select/MultiSelect.svelte

@@ -22,7 +22,8 @@ Only send this prop if you want to fetch `options` asynchronously.
 `options` prop will be ignored if this prop is set., Default: `null`
   @param {string|'fuzzy'|'strict'} [search_strategy="fuzzy"] - Filtered options to be displayed strictly based on search text or perform a fuzzy match.
 Fuzzy match will not work if `search` function is set, as the backend service is meant to do the matching., Default: `"fuzzy"`
-  @param {number} [scoreThreshold=3] - Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches., Default: `3`
+@param {number} [score_threshold=3] - Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches., Default: `3`
+  @param {number} [scoreThreshold=3] - (deprecated) Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches., Default: `3`
   @param {string|''|'small'|'medium'|'large'} [size=""] - Size of the input, Default: `""`
   @param {string|''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the input, Default: `""`
   @param {string} [style=""] - Inline CSS for input container, Default: `""`
@@ -260,7 +261,12 @@ Default value: `<span>{option[search_key] || option}</span>`
    * Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches.
    * @type {number}
    */
-  export let scoreThreshold = 3;
+  export let score_threshold = 3;
+  /**
+   * (deprecated) Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches.
+   * @type {number}
+   */
+  export let scoreThreshold = score_threshold;
   /**
    * Size of the input
    *  @type {import('@kws3/ui/types').SizeOptions}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "svelte": "index.js",
@@ -32,5 +32,5 @@
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "499097fc9ed767630977388f4502c9a9e119f886"
+  "gitHead": "c9c69fd1abb9f287bb6e4301f5bad02c2b5292e4"
 }

package/styles/RangeSlider.scss

@@ -253,6 +253,18 @@ $kws-slider-output-radius: $radius !default;
             }
           }
         }
+
+        &.is-thumb-#{$name} {
+          &::-webkit-slider-thumb {
+            background: $color !important;
+          }
+          &::-moz-range-thumb {
+            background: $color !important;
+          }
+          &::-ms-thumb {
+            background: $color !important;
+          }
+        }
       }
     }
   }