@kws3/ui 1.9.2 → 2.0.1

package/CHANGELOG.mdx

@@ -1,3 +1,29 @@
+## 2.0.1
+- Hardcoded color bugfix on pagination styles
+
+## 2.0.0
+ - Add support for custom CSS classes for the table in `GridView` component
+ - Add support for displaying `GridView` table rows in a compact manner using `is_narrow` prop.
+ - Vertically center all rows by default in `GridView`.
+ - Add support for custom CSS classes for the wrapper in `TileView` component
+ - Add support for variable number of items per row in `TileView` component via `fluid_items_per_row` prop
+ - Fix keyboard scrolling issue on `AutoComplete`,`MultiSelect` and `SearchableSelect` component
+ - Fix `time_24hr` reactivity issue on `Timepicker`
+ - Expose `min_time`, `max_time` from `Timepicker`
+ - Expose `readonly` from `Datepicker` and `Timepicker` to prevent calendar opening on focus.
+ - New `SearchInput` component:  search on multiple keys at the same time.
+ - Deprecated `@kws3/ui/utils/fuzzysearch` and `@kws3/ui/utils/some_module`.
+ - Expose factory function `makeSearchEngine` from `@kws3/ui/search`
+ - Expose `truncate`, `nl2br`, `cloneObject`, `rAF`, `debounce`, `capitaliseFirstLetter`, `createDate`, `currency`, `dateToOrdinal`, `randomIntegerFromInterval`, `randomPercent`, `fileDownloader` from `@kws3/ui/utils`.
+ - Expose keyboard events of `enter`, `tab`, `escape`, `space`, `leftarrow`, `rightarrow`, `downarrow`, `uparrow`, `backspace`, `del` from `@kws3/ui/keyboard`.
+ - Expose `hasResizeObserver`, `resizeObserver` from `@kws3/ui/resizeObserver`
+ - New utility `makeForms` exposed  from `@kws3\ui\form`
+ - Add support for material symbols icon pack from https://fonts.google.com/icons
+ - Baby steps towards typings
+
+## 1.9.3
+ - Bug fix with fuzzy.js initial config hoisting
+
 ## 1.9.2
  - Bug fix with fuzzy.js and Vite prebundling
  - Debounce fuzzy searches
@@ -16,7 +42,7 @@
  - New `AutoComplete` component
  - Make options text size match the input `size` in `MultiSelect` and `SearchableSelect`.
  - Prevent default arrow up/down behaviour on `MultiSelect` and `SearchableSelect` when options dropdown is open.
- 
+
 ## 1.8.3
  - Allow `clickableRows` and `bulk_actions` to work at the same time on `GridView`
  - Various bugfixes on `GridRow`
@@ -28,7 +54,7 @@
  - 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
 
@@ -43,7 +69,7 @@
  - Added support for subscribing to chart events
  - Added support for distributed bar charts using new `distributed` prop on `BarChart` component
  - Added examples for leveraging advanced chart features
- 
+
 ## 1.7.3
  - Fix docs for `Popover`
  - Increase performance for `SlidingPane` by using ResizeObserver when available
@@ -61,92 +87,92 @@
  - Added linting rules for ESLint. And corrected all resulting issues.
 
 ## 1.7.0
-- Ensure uniform usage of `$kws-theme-colors` across all components, this means `$kws-theme-colors` can be independent of the global `$colors` SCSS variable.
-- `DataSearch` component: Expand filters to fill area when main search input is not present.
-- `DataSort` component: Increase click area for activating dropdown, and provide visual segementation between label and dropdown.
-- New `Skeleton` component.
+ - Ensure uniform usage of `$kws-theme-colors` across all components, this means `$kws-theme-colors` can be independent of the global `$colors` SCSS variable.
+ - `DataSearch` component: Expand filters to fill area when main search input is not present.
+ - `DataSort` component: Increase click area for activating dropdown, and provide visual segementation between label and dropdown.
+ - New `Skeleton` component.
 
 ## 1.6.9
-- New `Timeline`, `TimelineItem` and `TimelineHeader` components.
+ - New `Timeline`, `TimelineItem` and `TimelineHeader` components.
 
 ## 1.6.8
-- Vertically align `is-icon` cells in `Grid`
+ - Vertically align `is-icon` cells in `Grid`
 
 ## 1.6.7
-- Added granular events `showing`, `shown`, `hiding` and `hidden` for `Popover`.
-- Added `is-checked` class on `Grid` when a row is checked using the multiselect checkboxes.
-- New colors for `is-checked` class on `Grid`
+ - Added granular events `showing`, `shown`, `hiding` and `hidden` for `Popover`.
+ - Added `is-checked` class on `Grid` when a row is checked using the multiselect checkboxes.
+ - New colors for `is-checked` class on `Grid`
 
 ## 1.6.6
-- Enhance `Popover` with native `show` `hide` `enable` `disable` methods
+ - Enhance `Popover` with native `show` `hide` `enable` `disable` methods
 
 ## 1.6.5
-- Filter fix on `DataSearch`
+ - Filter fix on `DataSearch`
 
 ## 1.6.4
-- Add support for `dropdown_portal` prop in `SearchableSelect`
+ - Add support for `dropdown_portal` prop in `SearchableSelect`
 
 ## 1.6.3
-- Prevent submit call on `MultiSelect` when `Enter` key is pressed while searching
-- Fix filter items going blank after search is initiated in `DataSearch`
+ - Prevent submit call on `MultiSelect` when `Enter` key is pressed while searching
+ - Fix filter items going blank after search is initiated in `DataSearch`
 
 ## 1.6.2
-- Add `dropdown_portal` prop on `MultiSelect` to allow rendering dropdown in alternative locations
+ - Add `dropdown_portal` prop on `MultiSelect` to allow rendering dropdown in alternative locations
 
 ## 1.6.1
-- New `Portal` component
-- Use `Portal` for `MultiSelect` and `SearchableSelect` components
+ - New `Portal` component
+ - Use `Portal` for `MultiSelect` and `SearchableSelect` components
 
 ## 1.6.0
-- Fix `DataSearch` responsiveness for mobile
-- Fix `Pagination` CSS for mobile
-- Fix `DataSort`  responsiveness for mobile
-- Fix functionality of `DataSearch`
+ - Fix `DataSearch` responsiveness for mobile
+ - Fix `Pagination` CSS for mobile
+ - Fix `DataSort` responsiveness for mobile
+ - Fix functionality of `DataSearch`
 
 ## 1.5.9
-- Fix `z-index` issue with `SearchableSelect`
+ - Fix `z-index` issue with `SearchableSelect`
 
 ## 1.5.8
-- Showing `undefined` on total in `Pagination`
+ - Showing `undefined` on total in `Pagination`
 
 ## 1.5.7
-- Width calculation on `DataSearch`
-- More `text` validation `Nl2br`
+ - Width calculation on `DataSearch`
+ - More `text` validation `Nl2br`
 
 ## 1.5.6
-- Fix attribute of `MultiSelect`
-- Fix `text` checking on `Nl2br`
+ - Fix attribute of `MultiSelect`
+ - Fix `text` checking on `Nl2br`
 
 ## 1.5.5
-- Added `BarChart`
-- Added `LineChart`
-- Added `AreaChart`
-- Added `RadialChart`
-- Support `sparklines` in `Charts`
-- Add `yAxisOptions` and `horizontal` bar for `Charts`
-- Fix attribute of `ConfirmButton`
-- Fix error Handling in `MixedChart`
+ - Added `BarChart`
+ - Added `LineChart`
+ - Added `AreaChart`
+ - Added `RadialChart`
+ - Support `sparklines` in `Charts`
+ - Add `yAxisOptions` and `horizontal` bar for `Charts`
+ - Fix attribute of `ConfirmButton`
+ - Fix error Handling in `MixedChart`
 
 ## 1.5.1
-- Chart bugfixes
-- Fix attribute of `NumberInput` for UI testing
+ - Chart bugfixes
+ - Fix attribute of `NumberInput` for UI testing
 
 ## 1.5.0
-- Added `DonutChart`
-- Added `MixedChart`
-- Added `PieChart`
+ - Added `DonutChart`
+ - Added `MixedChart`
+ - Added `PieChart`
 
 ## 1.4.7
-- Fix value mismatch on `NumberInput`
+ - Fix value mismatch on `NumberInput`
 
 ## 1.4.6
-- Fix Typing bug on `NumberInput`
+ - Fix Typing bug on `NumberInput`
 
 ## 1.4.5
-- Fix **on:change** event on `NumberInput`
+ - Fix **on:change** event on `NumberInput`
 
 ## 1.4.4
-- import  `Floatie`, `FloatingUIOutput`, `FloatiesStore` from `@kws3/ui` for `FloatingUIOutput`
+ - import  `Floatie`, `FloatingUIOutput`, `FloatiesStore` from `@kws3/ui` for `FloatingUIOutput`
 
 ## 1.4.3
-- Rename `completion_timeout` to `error_timeout` in `Buttons`
+ - Rename `completion_timeout` to `error_timeout` in `Buttons`

package/buttons/ConfirmButton.svelte

@@ -1,7 +1,6 @@
 <!--
   @component
 
-
   @param {string} [button_class=""] - CSS classes for the Confirm button, Default: `""`
   @param {string} [text=""] - Button text, Default: `""`
   @param {''|'small'|'medium'|'large'} [size=""] - Size of the Button, Default: `""`
@@ -82,6 +81,11 @@
 
   const fire = createEventDispatcher();
 
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   */
+
   /**
    * CSS classes for the Confirm button
    */
@@ -92,7 +96,7 @@
     text = "",
     /**
      * Size of the Button
-     * @type {''|'small'|'medium'|'large'}
+     * @type {SizeOptions}
      */
     size = "",
     /**
@@ -101,7 +105,7 @@
     icon = "check",
     /**
      * Color of the Button
-     * @type {''|'dark' | 'light' | 'warning' | 'info' | 'danger' | 'primary' | 'success'}
+     * @type {ColorOptions}
      */
     color = "primary",
     /**
@@ -154,6 +158,10 @@
   let confirm = false;
 
   $: main_color = "is-" + color;
+  /**
+   * Icon Size
+   * @type {SizeOptions}
+   */
   $: icon_size = "small";
   $: _confirm = should_confirm && confirm;
 

package/buttons/DeleteButton.svelte

@@ -1,7 +1,6 @@
 <!--
   @component
 
-
   @param {string} [button_class=""] - CSS classes for the Delete button, Default: `""`
   @param {string} [text="Delete"] - Button text, Default: `"Delete"`
   @param {''|'small'|'medium'|'large'} [size=""] - Size of the Button, Default: `""`
@@ -70,7 +69,7 @@
     text = "Delete",
     /**
      * Size of the Button
-     * @type {''|'small'|'medium'|'large'}
+     * @type {import('@kws3/ui/types').SizeOptions}
      */
     size = "",
     /**
@@ -79,7 +78,7 @@
     icon = "minus-circle",
     /**
      * Color of the Button
-     * @type {''|'dark' | 'light' | 'warning' | 'info' | 'danger' | 'primary' | 'success'}
+     * @type {import('@kws3/ui/types').ColorOptions}
      */
     color = "danger",
     /**

package/buttons/ProcessButton.svelte

@@ -1,7 +1,6 @@
 <!--
   @component
 
-
   @param {string} [button_class=""] - CSS classes for the Process button, Default: `""`
   @param {string} [text="Click Me"] - Button text, Default: `"Click Me"`
   @param {''|'small'|'medium'|'large'} [size=""] - Size of the Button, Default: `""`
@@ -71,7 +70,7 @@
     text = "Click Me",
     /**
      * Size of the Button
-     * @type {''|'small'|'medium'|'large'}
+     * @type {import('@kws3/ui/types').SizeOptions}
      */
     size = "",
     /**
@@ -80,7 +79,7 @@
     icon = "check",
     /**
      * Color of the Button
-     * @type {''|'dark' | 'light' | 'warning' | 'info' | 'danger' | 'primary' | 'success'}
+     * @type {import('@kws3/ui/types').ColorOptions}
      */
     color = "primary",
     /**
@@ -98,7 +97,7 @@
     /**
      * Context property
      */
-    context = null,
+    context = "",
     /**
      * Removes text, and text space in the button
      */

package/buttons/SubmitButton.svelte

@@ -1,7 +1,6 @@
 <!--
   @component
 
-
   @param {''|'small'|'medium'|'large'} [size=""] - Size of the Button, Default: `""`
   @param {''|'primary'|'warning'|'info'|'danger'|'dark'|'light'} [color="primary"] - Color of the Button, Default: `"primary"`
   @param {string} [text="Save Changes"] - Button text, Default: `"Save Changes"`
@@ -53,14 +52,19 @@
 
   const fire = createEventDispatcher();
 
+  /**
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   */
+
   /**
    * Size of the Button
-   * @type {''|'small'|'medium'|'large'}
+   * @type {SizeOptions}
    */
   export let size = "",
     /**
      * Color of the Button
-     * @type {''|'primary'|'warning'|'info'|'danger'|'dark'|'light'}
+     * @type {Exclude<ColorOptions , 'success'>}
      */
     color = "primary",
     /**
@@ -174,5 +178,9 @@
   }
 
   $: err_text = error_text === "" ? text : error_text;
+  /**
+   * Icon Size
+   * @type {SizeOptions}
+   */
   $: icon_size = size === "large" ? "" : "small";
 </script>

package/charts/AreaChart.svelte

@@ -115,7 +115,7 @@ This is to prevent unnecessary event subscriptions., Default: `[]`
      * Send an array of colors to override the default colors, or do not send anything to use the default colors
      * @type {array}
      */
-    colors = null,
+    colors = [],
     /**
      * String array of event names that will be captured and fired as svelte events.
      * This is to prevent unnecessary event subscriptions.

package/charts/BarChart.svelte

@@ -135,7 +135,7 @@ This is to prevent unnecessary event subscriptions., Default: `[]`
      * Send an array of colors to override the default colors, or do not send anything to use the default colors
      * @type {array}
      */
-    colors = null,
+    colors = [],
     /**
      * String array of event names that will be captured and fired as svelte events.
      * This is to prevent unnecessary event subscriptions.

package/charts/Chart.svelte

@@ -140,6 +140,7 @@ This is to prevent unnecessary event subscriptions., Default: `[]`
 
     if (canvas) {
       chart = new ApexCharts(canvas, config);
+      //@ts-ignore
       chart.render();
     }
   };

package/charts/DonutChart.svelte

@@ -105,7 +105,7 @@ This is to prevent unnecessary event subscriptions., Default: `[]`
      * Send an array of colors to override the default colors, or do not send anything to use the default colors
      * @type {array}
      */
-    colors = null,
+    colors = [],
     /**
      * String array of event names that will be captured and fired as svelte events.
      * This is to prevent unnecessary event subscriptions.

package/charts/LineChart.svelte

@@ -115,7 +115,7 @@ This is to prevent unnecessary event subscriptions., Default: `[]`
      * Send an array of colors to override the default colors, or do not send anything to use the default colors
      * @type {array}
      */
-    colors = null,
+    colors = [],
     /**
      * String array of event names that will be captured and fired as svelte events.
      * This is to prevent unnecessary event subscriptions.

package/charts/MixedChart.svelte

@@ -120,7 +120,7 @@ This is to prevent unnecessary event subscriptions., Default: `[]`
      * Send an array of colors to override the default colors, or do not send anything to use the default colors
      * @type {array}
      */
-    colors = null,
+    colors = [],
     /**
      * String array of event names that will be captured and fired as svelte events.
      * This is to prevent unnecessary event subscriptions.

package/charts/PieChart.svelte

@@ -105,7 +105,7 @@ This is to prevent unnecessary event subscriptions., Default: `[]`
      * Send an array of colors to override the default colors, or do not send anything to use the default colors
      * @type {array}
      */
-    colors = null,
+    colors = [],
     /**
      * String array of event names that will be captured and fired as svelte events.
      * This is to prevent unnecessary event subscriptions.

package/charts/RadialChart.svelte

@@ -115,7 +115,7 @@ This is to prevent unnecessary event subscriptions., Default: `[]`
      * Send an array of colors to override the default colors, or do not send anything to use the default colors
      * @type {array}
      */
-    colors = null,
+    colors = [],
     /**
      * String array of event names that will be captured and fired as svelte events.
      * This is to prevent unnecessary event subscriptions.

package/charts/utils.js

@@ -9,6 +9,7 @@ const themeColors = [
   "#77ED11",
 ];
 
+//@ts-ignore
 export const merge = ApexCharts.merge;
 
 export function pieChartOptions(labels, is_sparkline) {

package/controls/Checkbox.svelte

@@ -46,14 +46,20 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `"null"`
 <script>
   import { Icon } from "@kws3/ui";
 
+  /**
+   *
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   *
+   */
   /**
    * Size of the Checkbox
-   * @type {''|'small'|'medium'|'large'}
+   * @type {SizeOptions}
    */
   export let size = "",
     /**
      * Colour of the Checkbox
-     * @type {''|'primary'|'warning'|'info'|'danger'|'dark'|'light'}
+     * @type {Exclude<ColorOptions, 'success'>}
      */
     color = "",
     /**
@@ -100,9 +106,9 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `"null"`
      *
      * Ultimately defaults to `fa`, if family is not set anywhere
      *
-     * @type {''|'fa'|'lar'|'las'|'gg'|'unicons'}
+     * @type {string|''|'fa'|'lar'|'las'|'gg'|'unicons'|'material'}
      */
-    icon_family = null;
+    icon_family = "";
 
   /**
    * CSS classes of the Checkbox

package/controls/FileUpload.svelte

@@ -37,9 +37,9 @@ The following functions are returned in `event.detail`:
       {#if _is_uploading}
         <span class="loader" />
       {:else if _is_finished}
-        <Icon size="" icon="check-circle" fa_class="fa-lg" />
+        <Icon size="" icon="check-circle" class="fa-lg" />
       {:else}
-        <Icon size="" icon="upload" fa_class="fa-lg" />
+        <Icon size="" icon="upload" class="fa-lg" />
       {/if}
     </div>
     <div class="file">
@@ -88,6 +88,12 @@ The following functions are returned in `event.detail`:
   import { onMount, createEventDispatcher } from "svelte";
   import { Icon } from "@kws3/ui";
 
+  /**
+   *
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   *
+   */
   const fire = createEventDispatcher();
 
   /**
@@ -106,7 +112,7 @@ The following functions are returned in `event.detail`:
     info = "",
     /**
      * Color of the information text
-     * @type {''|'grey'|'primary'|'warning'|'success'|'info'|'danger'|'dark'|'light'}
+     * @type {ColorOptions | 'grey'}
      */
     info_color = "grey",
     /**
@@ -124,12 +130,12 @@ The following functions are returned in `event.detail`:
     disabled = false,
     /**
      * Size of the File Input
-     * @type {''|'small'|'medium'|'large'}
+     * @type {SizeOptions}
      */
     size = "",
     /**
      * Color of the File Input
-     * @type {''|'primary'|'warning'|'success'|'info'|'danger'|'dark'|'light'}
+     * @type {ColorOptions}
      */
     color = "";
 
@@ -157,13 +163,13 @@ The following functions are returned in `event.detail`:
       return "N/A";
     }
     if (n > 1073741824) {
-      return Math.round(n / 1073741824, 1) + " GB";
+      return Math.round(n / 1073741824) + " GB";
     }
     if (n > 1048576) {
-      return Math.round(n / 1048576, 1) + " MB";
+      return Math.round(n / 1048576) + " MB";
     }
     if (n > 1024) {
-      return Math.round(n / 1024, 1) + " KB";
+      return Math.round(n / 1024) + " KB";
     }
     return n + " b";
   }

package/controls/NumberInput.svelte

@@ -40,8 +40,8 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
       ? 'danger'
       : ''}"
     type="number"
-    min
-    max
+    {min}
+    {max}
     {step}
     {disabled}
     readonly={!typeable}
@@ -72,8 +72,8 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
           ? 'danger'
           : ''}"
         type="number"
-        min
-        max
+        {min}
+        {max}
         {step}
         {disabled}
         readonly={!typeable}
@@ -124,11 +124,17 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
   import { onMount, createEventDispatcher } from "svelte";
   import { Icon } from "@kws3/ui";
 
+  /**
+   *
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   *
+   */
   const fire = createEventDispatcher();
 
   /**
    * Size of the component
-   * @type {''|'small'|'medium'|'large'}
+   * @type {SizeOptions}
    */
   export let size = "",
     /**
@@ -137,6 +143,7 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
      * This property can be bound to, to fetch the current value
      *
      * This will be overridden if `min` is higher, or `max` is lower
+     * @type {number}
      */
     value = 0,
     /**
@@ -145,10 +152,12 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
     step = 1,
     /**
      * Minumum permitted value
+     * @type {number}
      */
     min = 0,
     /**
      * Maximum permitted value
+     * @type {number}
      */
     max = 100,
     /**
@@ -169,12 +178,12 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
     minus_icon = "minus",
     /**
      * Color of the Minus Icon
-     * @type {''|'success'|'primary'|'warning'|'info'|'danger'|'dark'|'light'}
+     * @type {ColorOptions}
      */
     minus_icon_color = "danger",
     /**
      * Color of the Minus Button
-     * @type {''|'success'|'primary'|'warning'|'info'|'danger'|'dark'|'light'}
+     * @type {ColorOptions}
      */
     minus_button_color = "",
     /**
@@ -183,12 +192,12 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
     plus_icon = "plus",
     /**
      * Color of the Plus Icon
-     * @type {''|'success'|'primary'|'warning'|'info'|'danger'|'dark'|'light'}
+     * @type {ColorOptions}
      */
     plus_icon_color = "success",
     /**
      * Color of the Plus Button
-     * @type {''|'success'|'primary'|'warning'|'info'|'danger'|'dark'|'light'}
+     * @type {ColorOptions}
      */
     plus_button_color = "",
     /**
@@ -231,7 +240,7 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
   const count = (i) => () => {
     if (typeof value == "undefined" || value === null) value = min;
     value = Number(value) + i * step;
-    if (step % 1 !== 0) value = value.toFixed(1);
+    if (step % 1 !== 0) value = Number(value.toFixed(1));
   };
 
   function validateInput() {

package/controls/Radio.svelte

@@ -38,6 +38,12 @@ See: https://svelte.dev/docs#bind_group, Default: `null`
 </label>
 
 <script>
+  /**
+   *
+   * @typedef {import('@kws3/ui/types').ColorOptions} ColorOptions
+   * @typedef {import('@kws3/ui/types').SizeOptions} SizeOptions
+   *
+   */
   /**
    * Value of radio button
    */
@@ -52,12 +58,12 @@ See: https://svelte.dev/docs#bind_group, Default: `null`
     label_style = "",
     /**
      * Size of the Radio Button
-     * @type {''|'small'|'medium'|'large'}
+     * @type {SizeOptions}
      */
     size = "",
     /**
      * Color of the Radio button when selected
-     * @type {''|'primary'|'warning'|'success'|'info'|'danger'|'dark'|'light'}
+     * @type {ColorOptions}
      */
     color = "",
     /**