@kws3/ui 1.9.1 → 2.0.0

package/forms/Timepicker.svelte

@@ -14,6 +14,10 @@ This property can be bound to, to fetch the selected time. Output is in the same
   @param {'primary'|'warning'|'info'|'danger'|'dark'|'light'} [ui_color="primary"] - Colour of popup time selection UI, Default: `"primary"`
   @param {boolean} [time_24hr=false] - Display time selection UI in 24hr format, Default: `false`
   @param {object} [options={}] - Extended set of options as supported by Flatpicker
+  @param {any} [min_time=null] - Set earliest selectable time as string
+  **Example:** `"12:00 PM"` Default: `null`
+  @param {any} [max_time=null] - Set latest selectable time as string
+  **Example:** `"12:00 AM"` Default: `null`
 
 See: https://flatpickr.js.org/options/, Default: `{}`
   @param {string} [class=""] - CSS classes for the input, Default: `""`
@@ -43,11 +47,15 @@ See: https://flatpickr.js.org/options/, Default: `{}`
   on:close={fireClose} />
 
 <script>
-  import { timepicker } from "./actions";
   import { createEventDispatcher } from "svelte";
+  import { timepicker } from "./actions";
 
   const fire = createEventDispatcher();
 
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   */
+
   /**
    * Accepts a date value in the format `H:i`
    *
@@ -62,7 +70,7 @@ See: https://flatpickr.js.org/options/, Default: `{}`
   export let style = "";
   /**
    * Colour of the Time picker input
-   * @type {''|'primary'|'warning'|'info'|'danger'|'dark'|'light'}
+   * @type {ColorOptions} color
    */
   export let color = "";
   /**
@@ -75,7 +83,7 @@ See: https://flatpickr.js.org/options/, Default: `{}`
   export let placeholder = "Select Time..";
   /**
    * Colour of popup time selection UI
-   * @type {'primary'|'warning'|'info'|'danger'|'dark'|'light'}
+   * @type {Exclude<ColorOptions, ''>}
    */
   export let ui_color = "primary";
 
@@ -84,23 +92,64 @@ See: https://flatpickr.js.org/options/, Default: `{}`
    */
   export let time_24hr = false;
 
+  /**
+   * Set earliest selectable time as string
+   *
+   * **Example:** `"01:00 PM"` or "13:00"`
+   * @type {any}
+   */
+  export let min_time = null;
+  /**
+   * Set latest selectable time as string
+   *
+   * **Example:** `"03:00 PM"` or "15:00"`
+   * @type {any}
+   */
+  export let max_time = null;
+
   /**
    * Extended set of options as supported by Flatpicker
    *
    * See: https://flatpickr.js.org/options/
    */
   export let options = {};
+
+  /**
+   * Make input value read-only
+   */
+  export let readonly = false;
+
   /**
    * CSS classes for the input
    */
+
   let klass = "";
   export { klass as class };
 
   let opts;
 
-  $: ui_color, options, time_24hr, fillOptions();
+  $: ui_color, options, time_24hr, min_time, max_time, readonly, fillOptions();
+
+  const convertTime12to24 = (time12h) => {
+    const [time, modifier] = time12h.split(" ");
+    let [hours, minutes] = time.split(":");
+    if (hours === "12") {
+      hours = "00";
+    }
+    if (modifier === "PM") {
+      hours = parseInt(hours, 10) + 12;
+    }
+    return {
+      hour: String(hours),
+      minute: String(minutes),
+      time: `${hours}:${minutes}`,
+    };
+  };
 
   function fillOptions() {
+    /**
+     * @type {object}
+     */
     let _opts = Object.assign(
       {
         color: ui_color,
@@ -109,6 +158,22 @@ See: https://flatpickr.js.org/options/, Default: `{}`
       options
     );
 
+    if (min_time) {
+      let _minTime24 = convertTime12to24(min_time);
+      _opts.minTime = _minTime24.time;
+      _opts.defaultHour = _minTime24.hour;
+      _opts.defaultMinute = _minTime24.minute;
+    }
+
+    if (max_time) {
+      let _maxTime24 = convertTime12to24(max_time);
+      _opts.maxTime = _maxTime24.time;
+    }
+
+    _opts.clickOpens = true;
+    if (readonly) {
+      _opts.clickOpens = false;
+    }
     opts = _opts;
   }
 

package/forms/actions.js

@@ -1,6 +1,6 @@
 import flatpickr from "flatpickr";
 
-function createFlatpickrAction(defaultOpts, hooks) {
+function createFlatpickrAction(defaultOpts, hooks, type) {
   return function (
     node,
     // eslint-disable-next-line no-unused-vars
@@ -34,9 +34,9 @@ function createFlatpickrAction(defaultOpts, hooks) {
       _opts["onChange"] = createFirer("dateChange");
     }
 
-    opts = Object.assign(defaultOpts, _opts, opts);
+    let OPTS = Object.assign(defaultOpts, _opts, opts);
 
-    const picker = flatpickr(node, opts);
+    let picker = flatpickr(node, OPTS);
 
     function createFirer(name) {
       return (selectedDates, dateStr, instance) => {
@@ -72,6 +72,10 @@ function createFlatpickrAction(defaultOpts, hooks) {
 
     return {
       update({ opts, value, placeholder, klass, style, disabled, color }) {
+        if (!picker.isOpen) {
+          picker = flatpickr(node, Object.assign(OPTS, opts));
+        }
+
         if (picker) {
           picker.setDate(value);
           if (opts) {
@@ -81,19 +85,19 @@ function createFlatpickrAction(defaultOpts, hooks) {
             if (opts.mode) {
               picker.set("mode", opts.mode);
             }
-            picker.set("minDate", opts.minDate ? opts.minDate : "");
-            picker.set("maxDate", opts.maxDate ? opts.maxDate : "");
-            picker.set("enable", opts.enable ? opts.enable : [() => true]);
-            picker.set("disable", opts.disable ? opts.disable : [() => false]);
-            picker.set("time_24hr", opts.time_24hr || false);
+            if (type === "time") {
+              picker.set("altFormat", opts.time_24hr ? "H:i" : "h:i K");
+            }
           }
-
           //respond reactively to props
+          /** @type {any} */
           const visibleInput = picker.input.nextSibling;
-          visibleInput.className = `input is-${color} ${klass}`;
-          visibleInput.style = `${style}`;
-          visibleInput.disabled = disabled;
-          visibleInput.placeholder = placeholder;
+          if (visibleInput) {
+            visibleInput.className = `input is-${color} ${klass}`;
+            visibleInput.style = `${style}`;
+            visibleInput.disabled = disabled;
+            visibleInput.placeholder = placeholder;
+          }
         }
       },
       destroy() {
@@ -109,7 +113,8 @@ export let datepicker = createFlatpickrAction(
     altFormat: "d/m/Y",
     dateFormat: "Y-m-d",
   },
-  ["onOpen", "onClose", "onMonthChange", "onYearChange", "onReady"]
+  ["onOpen", "onClose", "onMonthChange", "onYearChange", "onReady"],
+  "date"
 );
 
 export let timepicker = createFlatpickrAction(
@@ -120,5 +125,6 @@ export let timepicker = createFlatpickrAction(
     enableTime: true,
     noCalendar: true,
   },
-  ["onOpen", "onClose", "onReady"]
+  ["onOpen", "onClose", "onReady"],
+  "time"
 );

package/forms/colorpicker/Colorpicker.js

@@ -77,7 +77,11 @@ export default (function (win, doc) {
         (r = v), (g = p), (b = q);
         break;
     }
-    return [round(r * 255), round(g * 255), round(b * 255)];
+    return [
+      r !== undefined ? round(r * 255) : NaN,
+      g !== undefined ? round(g * 255) : NaN,
+      b !== undefined ? round(b * 255) : NaN,
+    ];
   }
 
   function HSV2HEX(a) {
@@ -116,8 +120,8 @@ export default (function (win, doc) {
   }
 
   function RGB2HEX(a) {
-    var s = +a[2] | (+a[1] << 8) | (+a[0] << 16);
-    s = "000000" + s.toString(16);
+    var s = (+a[2] | (+a[1] << 8) | (+a[0] << 16)).toString(16);
+    s = "000000" + s;
     return s.slice(-6);
   }
 
@@ -166,12 +170,14 @@ export default (function (win, doc) {
 
   return (function ($) {
     // plugin version
+    //@ts-ignore
     $.version = "1.3.2";
 
     // collect all instance(s)
     $[instance] = {};
 
     // plug to all instance(s)
+    //@ts-ignore
     $.each = function (fn, t) {
       return (
         delay(
@@ -189,27 +195,39 @@ export default (function (win, doc) {
     };
 
     // static method(s)
+    //@ts-ignore
     $.parse = parse;
+    //@ts-ignore
     $._HSV2RGB = HSV2RGB;
+    //@ts-ignore
     $._HSV2HEX = HSV2HEX;
+    //@ts-ignore
     $._RGB2HSV = RGB2HSV;
+    //@ts-ignore
     $._HEX2HSV = HEX2HSV;
+    //@ts-ignore
     $._HEX2RGB = function (a) {
       return _2RGB_pri(HEX2RGB(a));
     };
+    //@ts-ignore
     $.HSV2RGB = function (a) {
       return HSV2RGB(_2HSV_pri(a));
     };
+    //@ts-ignore
     $.HSV2HEX = function (a) {
       return HSV2HEX(_2HSV_pri(a));
     };
+    //@ts-ignore
     $.RGB2HSV = function (a) {
       return _2HSV_pub(RGB2HSV(a));
     };
+    //@ts-ignore
     $.RGB2HEX = RGB2HEX;
+    //@ts-ignore
     $.HEX2HSV = function (s) {
       return _2HSV_pub(HEX2HSV(s));
     };
+    //@ts-ignore
     $.HEX2RGB = HEX2RGB;
 
     return $;
@@ -405,6 +423,7 @@ export default (function (win, doc) {
           if (is_target) {
             create();
           } else {
+            //@ts-ignore
             $.exit();
           }
           trigger(is_target ? "enter" : "exit", [$]);
@@ -416,13 +435,16 @@ export default (function (win, doc) {
           if (events !== false) {
             on(events, target, click);
           }
+          //@ts-ignore
           $.create = function () {
             return create(1), trigger("create", [$]), $;
           };
+          //@ts-ignore
           $.destroy = function () {
             if (events !== false) {
               off(events, target, click);
             }
+            //@ts-ignore
             $.exit(), set_data(false);
             return trigger("destroy", [$]), $;
           };
@@ -435,8 +457,10 @@ export default (function (win, doc) {
           SV_point.style.right = SV_W - SV_point_W / 2 - SV_W * +HSV[1] + "px";
           SV_point.style.top = SV_H - SV_point_H / 2 - SV_H * +HSV[2] + "px";
         };
+        //@ts-ignore
         $.exit = function () {
           if (visible()) {
+            //@ts-ignore
             visible().removeChild(picker);
             $.visible = false;
           }
@@ -499,6 +523,7 @@ export default (function (win, doc) {
           if (!is_target && !is_picker) {
             // click outside the target or picker element to exit
             if (visible() && events !== false)
+              //@ts-ignore
               $.exit(), trigger("exit", [$]), trigger_(0, a);
           } else {
             if (is_picker) {

package/forms/colorpicker/Colorpicker.svelte

@@ -36,7 +36,7 @@ This property can be bound to, to fetch the current colour, Default: `"000000"`
         on:focus={focused}
         {disabled}
         bind:value={color}
-        use:colorpicker={color} />
+        use:colorpicker />
       {#if !mini}
         <Icon icon="hashtag" class="is-left" inner_style="color:#{color}" />
       {/if}
@@ -84,7 +84,7 @@ This property can be bound to, to fetch the current colour, Default: `"000000"`
     disabled = false,
     /**
      * Size of the colour picker trigger
-     * @type {''|'small'|'medium'|'large'}
+     * @type {import('@kws3/ui/types').SizeOptions}
      */
     size = "";
 

package/forms/select/MultiSelect.svelte

@@ -2,9 +2,9 @@
   @component
 
 
-  @param {array} [value=[]] - Value of the Input
+  @param {Array|?string} [value=undefined] - Value of the Input
 
-This property can be bound to, to fetch the current value, Default: `[]`
+This property can be bound to, to fetch the current value, Default: `undefined`
   @param {object} [max=null] - Maximum number of selectable items from dropdown list.
 
 Accepts a `null` value for unlimited selected items.
@@ -20,11 +20,11 @@ this property of each object will be returned as the value, Default: `"id"`
 
 Only send this prop if you want to fetch `options` asynchronously.
 `options` prop will be ignored if this prop is set., Default: `null`
-  @param {'fuzzy'|'strict'} [search_strategy="fuzzy"] - Filtered options to be displayed strictly based on search text or perform a fuzzy match.
+  @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 {''|'small'|'medium'|'large'} [size=""] - Size of the input, Default: `""`
-  @param {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'} [color=""] - Color of the input, Default: `""`
+  @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: `""`
   @param {boolean} [readonly=false] - Marks component as read-only, Default: `false`
   @param {boolean} [disabled=false] - Disables the component, Default: `false`
@@ -132,8 +132,22 @@ Default value: `<span>{option[search_key] || option}</span>`
             on:mousedown|preventDefault|stopPropagation={() =>
               handleOptionMouseDown(option)}
             on:mouseenter|preventDefault|stopPropagation={() => {
+              if (mouseTracker.preventSelect) return;
               activeOption = option;
             }}
+            on:mousemove|preventDefault|stopPropagation={(e) => {
+              let { preventSelect, lastX, lastY } = mouseTracker;
+              if (
+                preventSelect &&
+                (lastX !== e.clientX || lastY !== e.clientY)
+              ) {
+                mouseTracker.preventSelect = false;
+                activeOption = option;
+              }
+              // mouse x,y is not in same position after the scrolling
+              mouseTracker.lastX = e.clientX;
+              mouseTracker.lastY = e.clientY;
+            }}
             class="is-size-{list_text_size[size]}"
             class:selected={isSelected(option)}
             class:active={activeOption === option}>
@@ -164,7 +178,8 @@ 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 fuzzy from "fuzzy.js";
+  import { makeSearchEngine } from "@kws3/ui/search";
+  import { scrollIntoActiveElement } from "../../internal";
 
   const sameWidthPopperModifier = {
     name: "sameWidth",
@@ -184,10 +199,16 @@ Default value: `<span>{option[search_key] || option}</span>`
 
   const rootContainerId = "kws-overlay-root";
 
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   */
+
   /**
    * Value of the Input
    *
    * This property can be bound to, to fetch the current value
+   * @type {Array|?string}
    */
   export let value = [];
   /**
@@ -195,6 +216,7 @@ Default value: `<span>{option[search_key] || option}</span>`
    *
    * Accepts a `null` value for unlimited selected items.
    * Or a number value
+   * @type {?number}
    */
   export let max = null;
   /**
@@ -230,22 +252,23 @@ Default value: `<span>{option[search_key] || option}</span>`
   /**
    * 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.
-   * @type {'fuzzy'|'strict'}
+   * @type {string|'fuzzy'|'strict'}
    */
   export let search_strategy = "fuzzy";
 
   /**
    * Score threshold for fuzzy search strategy, setting high score gives more fuzzy matches.
+   * @type {number}
    */
   export let scoreThreshold = 3;
   /**
    * Size of the input
-   *  @type {''|'small'|'medium'|'large'}
+   *  @type {import('@kws3/ui/types').SizeOptions}
    */
   export let size = "";
   /**
    * Color of the input
-   * @type {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'}
+   *  @type {import('@kws3/ui/types').ColorOptions}
    */
   export let color = "";
   /**
@@ -326,6 +349,12 @@ Default value: `<span>{option[search_key] || option}</span>`
     searchText = "",
     searching = false,
     showOptions = false,
+    mouseTracker = {
+      lastX: 0,
+      lastY: 0, //  to check actual mouse is moving or not, for WebKit compatibility,
+      preventSelect: false, //prevent select by mouse when up or down key is pressed
+    },
+    fuzzysearch = null,
     filteredOptions = [], //list of options filtered by search query
     normalisedOptions = [], //list of options normalised
     selectedOptions = [], //list of options that are selected
@@ -368,11 +397,15 @@ Default value: `<span>{option[search_key] || option}</span>`
   $: activeOption, searchText, filteredOptions, updateActiveOption();
 
   //TODO: optimise isSelected function
+  /** @type {(option: array)=> boolean}*/
   $: isSelected = (option) => {
     if (single) return matchesValue(value, option);
     if (!(value && value.length > 0) || value === "") return false;
     // nothing is selected if `value` is the empty array or string
-    else return value.some((v) => matchesValue(v, option));
+    else
+      return Array.isArray(value)
+        ? value.some((v) => matchesValue(v, option))
+        : false;
   };
 
   $: singleVisibleValue =
@@ -407,7 +440,7 @@ Default value: `<span>{option[search_key] || option}</span>`
       debouncedTriggerSearch(filter);
     } else {
       if (allow_fuzzy_match) {
-        filteredOptions = fuzzySearch(filter, [...normalisedOptions]);
+        fuzzySearch(filter, [...normalisedOptions]);
       } else {
         filteredOptions = strictSearch(filter, [...normalisedOptions]);
       }
@@ -416,7 +449,11 @@ Default value: `<span>{option[search_key] || option}</span>`
 
   function updateActiveOption() {
     if (
-      (activeOption && searching && !filteredOptions.includes(activeOption)) ||
+      (activeOption &&
+        searching &&
+        !filteredOptions.some(
+          (fo) => fo[used_value_key] === activeOption[used_value_key]
+        )) ||
       (!activeOption && searchText)
     ) {
       activeOption = filteredOptions[0];
@@ -446,11 +483,15 @@ Default value: `<span>{option[search_key] || option}</span>`
 
       selectedOptions = _normalisedOptions
         .filter(
-          (v) => value && value.some((vl) => `${v[used_value_key]}` === `${vl}`)
+          (v) =>
+            Array.isArray(value) &&
+            value.some((vl) => `${v[used_value_key]}` === `${vl}`)
         )
         .sort(
           (a, b) =>
-            value.indexOf(a[used_value_key]) - value.indexOf(b[used_value_key])
+            // tweak for 'value is nullable' type error
+            (value ? value.indexOf(a[used_value_key]) : 0) -
+            (value ? value.indexOf(b[used_value_key]) : 0)
         );
     }
 
@@ -465,11 +506,13 @@ Default value: `<span>{option[search_key] || option}</span>`
       return;
     }
     options_loading = true;
-    search(filter).then((_options) => {
-      options = _options;
-      searching = false;
-      options_loading = false;
-    });
+    if (search !== null) {
+      search(filter).then((_options) => {
+        options = _options;
+        searching = false;
+        options_loading = false;
+      });
+    }
   }
 
   const debouncedTriggerSearch = debounce(triggerSearch, 150, false);
@@ -478,12 +521,25 @@ Default value: `<span>{option[search_key] || option}</span>`
     POPPER = createPopper(el, dropdown, {
       strategy: "fixed",
       placement: "bottom-start",
+      // @ts-ignore
       modifiers: [sameWidthPopperModifier],
     });
 
-    if (allow_fuzzy_match && fuzzy) {
-      fuzzy.analyzeSubTerms = true;
-      fuzzy.analyzeSubTermDepth = 10;
+    if (allow_fuzzy_match) {
+      let fuzzyOpts = {
+        analyzeSubTerms: true,
+        analyzeSubTermDepth: 10,
+        highlighting: {
+          after: "",
+          before: "",
+        },
+      };
+      let searchOptions = {
+        search_key: used_search_key,
+        scoreThreshold,
+        fuzzyOpts,
+      };
+      fuzzysearch = makeSearchEngine(searchOptions);
     }
 
     //normalize value for single versus multiselect
@@ -531,16 +587,20 @@ Default value: `<span>{option[search_key] || option}</span>`
       setOptionsVisible(false);
     }
 
-    if (!isAlreadySelected && !single && (max === null || value.length < max)) {
+    if (
+      !isAlreadySelected &&
+      !single &&
+      (max === null || (value && value.length < max))
+    ) {
       if (asyncMode) {
         //Do not filter invalid options, as they are async and might not be invalid
         //but ensure they are unique
-        value = [...value, token[used_value_key]].filter(
+        value = [...(value ? value : []), token[used_value_key]].filter(
           (v, i, a) => a.indexOf(v) === i
         );
       } else {
         //attach to value array while filtering out invalid values
-        value = [...value, token[used_value_key]].filter((v) => {
+        value = [...(value ? value : []), token[used_value_key]].filter((v) => {
           return normalisedOptions.filter((nv) => nv[used_value_key] === v)
             .length;
         });
@@ -568,7 +628,7 @@ Default value: `<span>{option[search_key] || option}</span>`
 
   function remove(token) {
     if (readonly || disabled || single) return;
-    value = value.filter
+    value = Array.isArray(value)
       ? value.filter((item) => !matchesValue(item, token))
       : value;
 
@@ -633,6 +693,14 @@ Default value: `<span>{option[search_key] || option}</span>`
           activeOption = filteredOptions[0];
         else activeOption = filteredOptions[newActiveIdx];
       }
+
+      tick().then(() => {
+        if (dropdown) {
+          mouseTracker.preventSelect = true;
+          let activeElem = dropdown.querySelector(".active");
+          scrollIntoActiveElement(dropdown, activeElem);
+        }
+      });
     } else if (event.key === `Backspace`) {
       if (single && hasValue) {
         //for a single select
@@ -716,27 +784,16 @@ Default value: `<span>{option[search_key] || option}</span>`
     });
   };
 
-  function fuzzySearch(filter, options) {
-    if (!filter) return options;
-    if (options.length) {
-      let OPTS = options.map((item) => {
-        let output = fuzzy(item[used_search_key], filter);
-        item = { ...output, original: item };
-        item.score =
-          !item.score || (item.score && item.score < output.score)
-            ? output.score
-            : item.score || 0;
-        return item;
-      });
+  const fuzzySearch = debounce(searchInFuzzyMode, 200, false);
 
-      let maxScore = Math.max(...OPTS.map((i) => i.score));
-      let calculatedLimit = maxScore - scoreThreshold;
-
-      OPTS = OPTS.filter(
-        (r) => r.score > (calculatedLimit > 0 ? calculatedLimit : 0)
-      ).map((o) => o.original);
-
-      return OPTS;
+  function searchInFuzzyMode(filter, options) {
+    if (!filter) {
+      filteredOptions = options;
+      return;
+    }
+    if (options.length) {
+      let result = fuzzysearch(filter, options);
+      filteredOptions = result;
     }
   }