@kws3/ui 1.9.3 → 2.0.0

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 { fuzzysearch } from "../../utils/fuzzysearch";
+  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,7 +349,12 @@ Default value: `<span>{option[search_key] || option}</span>`
     searchText = "",
     searching = false,
     showOptions = false,
-    fuzzyOpts = {}, // fuzzy.js lib options
+    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
@@ -369,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 =
@@ -451,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)
         );
     }
 
@@ -470,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);
@@ -483,11 +521,12 @@ 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) {
-      fuzzyOpts = {
+      let fuzzyOpts = {
         analyzeSubTerms: true,
         analyzeSubTermDepth: 10,
         highlighting: {
@@ -495,6 +534,12 @@ Default value: `<span>{option[search_key] || option}</span>`
           before: "",
         },
       };
+      let searchOptions = {
+        search_key: used_search_key,
+        scoreThreshold,
+        fuzzyOpts,
+      };
+      fuzzysearch = makeSearchEngine(searchOptions);
     }
 
     //normalize value for single versus multiselect
@@ -542,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;
         });
@@ -579,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;
 
@@ -644,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
@@ -735,11 +792,7 @@ Default value: `<span>{option[search_key] || option}</span>`
       return;
     }
     if (options.length) {
-      let result = fuzzysearch(filter, options, {
-        search_key: used_search_key,
-        scoreThreshold,
-        fuzzyOpts,
-      });
+      let result = fuzzysearch(filter, options);
       filteredOptions = result;
     }
   }

package/forms/select/SearchableSelect.svelte

@@ -12,8 +12,8 @@ Used to populate the list of options in the dropdown, Default: `[]`
 this property of each object will be searched, Default: `"name"`
   @param {string} [value_key="id"] - If `options` is an array of objects,
 this property of each object will be returned as the value, Default: `"id"`
-  @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 {function|null} [search=null] - Async function to fetch options
@@ -88,6 +88,7 @@ Default value: `<span>{option[search_key] || option}</span>`
    * Value of the Input
    *
    * This property can be bound to, to fetch the current value
+   * @type {object}
    */
   export let value = null;
   /**
@@ -112,12 +113,12 @@ Default value: `<span>{option[search_key] || option}</span>`
   export let value_key = "id";
   /**
    * 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 = "";
   /**
@@ -140,7 +141,7 @@ 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";
   /**

package/helpers/CardModal.svelte

@@ -37,6 +37,7 @@ Only visible when the
     <div
       transition:scale={{
         duration: transitionDuration,
+        // @ts-ignore
         from: 0.8,
         to: 1,
         delay: transitionDelay,
@@ -116,7 +117,7 @@ Only visible when the
   export let title = "",
     /**
      * Size of the modal
-     * @type {'small'|'medium'|'large'}
+     * @type {import('@kws3/ui/types').SizeOptions}
      */
     size = "small",
     /**

package/helpers/ClipboardCopier.svelte

@@ -41,6 +41,9 @@ If `''` is selected, Icon will not change colour after copying, Default: `"succe
   import { tick } from "svelte";
   import { Icon } from "@kws3/ui";
 
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   */
   /**
    * Default tooltip text
    */
@@ -70,7 +73,7 @@ If `''` is selected, Icon will not change colour after copying, Default: `"succe
      *
      * If `''` is selected, Icon will not change colour after copying
      *
-     * @type {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'}
+     * @type {import('@kws3/ui/types').ColorOptions}
      */
     copied_icon_color = "success";
 

package/helpers/Dialog/Dialog.svelte

@@ -87,12 +87,17 @@ For internal use only - not part of config object, Default: `""`
 
 <script>
   import { tick, onMount, createEventDispatcher } from "svelte";
-  import { Icon } from "@kws3/ui";
-  import { CardModal } from "@kws3/ui";
-  import { isEnterKey, isEscKey, capitaliseFirstLetter } from "@kws3/ui/utils";
+  import { Icon, CardModal } from "@kws3/ui";
+  import { capitaliseFirstLetter } from "@kws3/ui/utils";
+  import { isEnterKey, isEscKey } from "../../internal";
 
   const fire = createEventDispatcher();
 
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   */
+
   /**
    * Title text of the Dialog box
    * @type {string}
@@ -104,7 +109,7 @@ For internal use only - not part of config object, Default: `""`
     help_text = "",
     /**
      * Size of the Dialog box
-     * @type {'small'|'medium'|'large'}
+     * @type {SizeOptions}
      */
     size = "small",
     /**
@@ -118,12 +123,12 @@ For internal use only - not part of config object, Default: `""`
     icon = "",
     /**
      * Color of the Icon in the Dialog box
-     * @type {'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'}
+     * @type {ColorOptions}
      */
     icon_color = "primary",
     /**
      * Size of the Icon in the Dialog box
-     * @type {'small'|'medium'|'large'}
+     * @type {SizeOptions}
      */
     icon_size = "",
     /**
@@ -132,7 +137,7 @@ For internal use only - not part of config object, Default: `""`
     ok_button_text = "Ok",
     /**
      * Color of OK button
-     * @type {'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'}
+     * @type {ColorOptions} ok_button_color
      */
     ok_button_color = "primary",
     /**
@@ -146,7 +151,7 @@ For internal use only - not part of config object, Default: `""`
     cancel_button_text = "Cancel",
     /**
      * Color of Cancel button
-     * @type {''|'primary'|'success'|'warning'|'info'|'danger'|'dark'|'light'}
+     * @type {ColorOptions}
      */
     cancel_button_color = "",
     /**

package/helpers/Dialog/index.js

@@ -4,16 +4,19 @@ function createDialog(msg, props) {
   props = Object.assign(props, { _text: msg });
 
   const promise = new Promise((fulfil) => {
+    //@ts-ignore
     const dialog = new Dialog({
       target: document.body,
       props,
       intro: true,
     });
 
+    //@ts-ignore
     dialog.$on("_done", ({ detail }) => {
       fulfil(detail);
       //Does not outro out because of
       //https://github.com/sveltejs/svelte/issues/4056
+      //@ts-ignore
       dialog.$destroy();
     });
   });
@@ -39,8 +42,11 @@ export function confirm(msg, props) {
   return createDialog(msg, props);
 }
 
+//@ts-ignore
 Dialog.alert = alert;
+//@ts-ignore
 Dialog.confirm = confirm;
+//@ts-ignore
 Dialog.prompt = prompt;
 
 export default Dialog;

package/helpers/Divider.svelte

@@ -25,7 +25,7 @@
 <script>
   /**
    * Color of the Divider lines
-   * @type {'' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link' | 'dark' | 'light'}
+   * @type {import('@kws3/ui/types').ColorOptions}
    */
   export let color = "",
     /**
@@ -38,7 +38,7 @@
     vertical = false,
     /**
      * Alignment of the Divider text. `top`/`left` and `bottom`/`right` are analogous for vertical Dividers
-     * @type {'center' | 'left' | 'right' | 'top' | 'bottom'}
+     * @type {string|'center' | 'left' | 'right' | 'top' | 'bottom'}
      */
     alignment = "center",
     /**