@kws3/ui 1.8.1 → 1.8.2

package/CHANGELOG.mdx

@@ -1,3 +1,9 @@
+## 1.8.2
+ - Usability fixes for `NumberInput`
+ - New `input_only`, `force_integer`, `style` and `class` props for `NumberInput`
+ - Forward `focus`, `blur` input events for `NumberInput`
+ - Use custom version of `fuzzysearch` for `SearchableSelect` and `MultiSelect`
+ 
 ## 1.8.1
  - New `ScrollableList` component
 

package/controls/NumberInput.svelte

@@ -20,52 +20,84 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
   @param {string} [plus_icon="plus"] - Name of the icon that is to be displayed in the plus button, Default: `"plus"`
   @param {''|'success'|'primary'|'warning'|'info'|'danger'|'dark'|'light'} [plus_icon_color="success"] - Color of the Plus Icon, Default: `"success"`
   @param {''|'success'|'primary'|'warning'|'info'|'danger'|'dark'|'light'} [plus_button_color=""] - Color of the Plus Button, Default: `""`
+  @param {boolean} [input_only=false] - Show input without controls, Default: `false`
+  @param {boolean} [force_integer=false] - Prevent decimal numbers such as `1.5`, Default: `false`
+  @param {string} [style=""] - Inline CSS for component, Default: `""`
+  @param {string} [class=""] - CSS classes for component, Default: `""`
 
   ### Events
   - `change` - Triggered when value changes
+  - `blur`
+  - `focus`
 
 -->
-<div class="field has-addons">
-  <div class="control">
-    <button
-      type="button"
-      class="button is-{size} is-{minus_button_color}"
-      style="box-shadow:none;"
-      on:click={count(-1)}
-      disabled={disabled || value <= min}>
-      <Icon
-        icon={minus_icon}
-        size="small"
-        class="has-text-{minus_icon_color}" />
-    </button>
+{#if input_only}
+  <input
+    {style}
+    data-testid="input"
+    class="input has-text-centered {klass} is-{size} is-{value < min ||
+    value > max
+      ? 'danger'
+      : ''}"
+    type="number"
+    min
+    max
+    {step}
+    {disabled}
+    readonly={!typeable}
+    bind:value
+    on:blur={isBlurred}
+    on:blur
+    on:focus={isFocused}
+    on:focus />
+{:else}
+  <div class="field has-addons {klass}" {style}>
+    <div class="control">
+      <button
+        type="button"
+        class="button is-{size} is-{minus_button_color}"
+        style="box-shadow:none;"
+        on:click={count(-1)}
+        disabled={disabled || value <= min}>
+        <Icon
+          icon={minus_icon}
+          size="small"
+          class="has-text-{minus_icon_color}" />
+      </button>
+    </div>
+    <div class="control is-{fullwidth ? 'expanded' : 'narrow'}">
+      <input
+        data-testid="input"
+        class="input has-text-centered is-{size} is-{value < min || value > max
+          ? 'danger'
+          : ''}"
+        type="number"
+        min
+        max
+        {step}
+        {disabled}
+        readonly={!typeable}
+        bind:value
+        on:blur={isBlurred}
+        on:blur
+        on:focus={isFocused}
+        on:focus />
+    </div>
+    <div class="control">
+      <button
+        type="button"
+        class="button is-{size} is-{plus_button_color}"
+        style="box-shadow:none;"
+        on:click|preventDefault={count(+1)}
+        disabled={disabled || value >= max}>
+        <Icon
+          icon={plus_icon}
+          size="small"
+          class="has-text-{plus_icon_color}" />
+      </button>
+    </div>
   </div>
-  <div class="control is-{fullwidth ? 'expanded' : 'narrow'}">
-    <input
-      data-testid="input"
-      class="input has-text-centered is-{size} is-{value < min || value > max
-        ? 'danger'
-        : ''}"
-      type="number"
-      min
-      max
-      step
-      {disabled}
-      readonly={!typeable}
-      bind:value
-      on:blur={isBlurred()}
-      on:focus={isFocused()} />
-  </div>
-  <div class="control">
-    <button
-      type="button"
-      class="button is-{size} is-{plus_button_color}"
-      style="box-shadow:none;"
-      on:click|preventDefault={count(+1)}
-      disabled={disabled || value >= max}>
-      <Icon icon={plus_icon} size="small" class="has-text-{plus_icon_color}" />
-    </button>
-  </div>
-</div>
+{/if}
 
 <style>
   input[type="number"]::-webkit-inner-spin-button,
@@ -158,7 +190,25 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
      * Color of the Plus Button
      * @type {''|'success'|'primary'|'warning'|'info'|'danger'|'dark'|'light'}
      */
-    plus_button_color = "";
+    plus_button_color = "",
+    /**
+     * Show input without controls
+     */
+    input_only = false,
+    /**
+     * Prevent decimal numbers such as `1.5`
+     */
+    force_integer = false,
+    /**
+     * Inline CSS for component
+     */
+    style = "";
+
+  /**
+   * CSS classes for component
+   */
+  let klass = "";
+  export { klass as class };
 
   let _has_focus = false,
     _old_value = null;
@@ -189,6 +239,8 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
 
     if (typeof value == "undefined" || value === null) value = min;
 
+    if (force_integer) value = Math.floor(Number(value));
+
     if (value < min) value = min;
     if (value > max) value = max;
 

package/forms/select/MultiSelect.svelte

@@ -160,7 +160,7 @@ Default value: `<span>{option[search_key] || option}</span>`
   import { debounce } from "@kws3/ui/utils";
   import { createEventDispatcher, onMount, tick } from "svelte";
   import { createPopper } from "@popperjs/core";
-  import fuzzysearch from "fuzzysearch";
+  import fuzzysearch from "@kws3/ui/utils/fuzzysearch";
 
   const sameWidthPopperModifier = {
     name: "sameWidth",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -25,10 +25,9 @@
   "dependencies": {
     "apexcharts": "3.33.2",
     "flatpickr": "^4.5.2",
-    "fuzzysearch": "^1.0.3",
     "svelte-portal": "^2.1.2",
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "2fdaba3e13397494f06b5881bf92f68b1c7c695d"
+  "gitHead": "9fcbe3d34101490398b7bf571334e84e9ee04aee"
 }

package/utils/fuzzysearch.js

@@ -0,0 +1,20 @@
+export default function fuzzysearch(needle, haystack) {
+  var tlen = haystack.length;
+  var qlen = needle.length;
+  if (qlen > tlen) {
+    return false;
+  }
+  if (qlen === tlen) {
+    return needle === haystack;
+  }
+  outer: for (var i = 0, j = 0; i < qlen; i++) {
+    var nch = needle.charCodeAt(i);
+    while (j < tlen) {
+      if (haystack.charCodeAt(j++) === nch) {
+        continue outer;
+      }
+    }
+    return false;
+  }
+  return true;
+}