@kws3/ui 1.6.9 → 1.7.2

package/CHANGELOG.mdx

@@ -1,3 +1,20 @@
+## 1.7.2
+ - `DatePicker` component: fix initialisation bug on mobile
+ - `Pagination` component: rename property `breakThreshold` -> `maxVisiblePages` plus bugfix and documentation update
+
+## 1.7.1
+ - `Skeleton` component: Illustrate in example the use of empty string for `color` prop.
+ - `Pagination` component: Deprecate `meta` prop. And use separate props for `offset`, `limit`, `count` and `total` instead.
+ - `Pagination` component: Add methods `prev()`, `next()`, `first()`, `last()` and `goto(page)`.
+ - New `Divider` component.
+ - `Modal` component can now be opened and closed programatically via `open()` and `close()` methods.
+ - 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.
 
 ## 1.6.9
 - New `Timeline`, `TimelineItem` and `TimelineHeader` components.

package/buttons/SubmitButton.svelte

@@ -15,9 +15,9 @@
   @param {number} [completion_timeout=600] - How long to wait before `saved` event is fired, and the UI state reverts back to normal, Default: `600`
   @param {number} [error_timeout=3000] - How long to wait before `error` event is fired, and the UI state reverts back to normal, Default: `3000`
   @param {string} [class=""] - CSS classes for Button container, Default: `""`
-  @param {function} [saving()] - call this function on form saving state
-  @param {function} [saved(callback, timeout)] - call this function after form saved
-  @param {function} [error(callback, timeout)] - call this function on form error state
+  @method `saving()` - call this method on form saving state
+  @method `saved(callback, timeout)` - call this method after form saved
+  @method `error(callback, timeout)` - call this method on form error state
 
   ### Events
   - `saved` - Fired on successful submission
@@ -115,7 +115,7 @@
   export { klass as class };
 
   /**
-   * call this function on form saving state
+   * call this method on form saving state
    */
   export function saving() {
     tracker = {
@@ -126,7 +126,7 @@
   }
 
   /**
-   * call this function after form saved
+   * call this method after form saved
    */
   export function saved(callback, timeout = completion_timeout) {
     tracker = {
@@ -150,7 +150,7 @@
   }
 
   /**
-   * call this function on form error state
+   * call this method on form error state
    */
   export function error(callback, timeout = error_timeout) {
     tracker = {
@@ -173,6 +173,6 @@
     }, timeout);
   }
 
-  $: err_text = error_text == "" ? text : error_text;
-  $: icon_size = size == "large" ? "" : "small";
+  $: err_text = error_text === "" ? text : error_text;
+  $: icon_size = size === "large" ? "" : "small";
 </script>

package/controls/Checkbox.svelte

@@ -15,9 +15,9 @@ Checked\Not Checked, Default: `false`
   @param {string} [label_style=""] - Inline CSS for the Checkbox label, Default: `""`
   @param {''|'fa'|'lar'|'las'|'gg'|'unicons'} [icon_family="null"] - Icon family to be used
 
-Defaults to global family set via `Icon.setDefaultIconType()`
+Defaults to global family set via `Icon.setDefaultIconType()`
 
-Ultimately defaults to `fa`, if family is not set anywhere, Default: `"null"`
+Ultimately defaults to `fa`, if family is not set anywhere, Default: `"null"`
   @param {string} [class=""] - CSS classes of the Checkbox, Default: `""`
 
   ### Events
@@ -96,9 +96,9 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `"null"`
     /**
      * Icon family to be used
      *
-     * Defaults to global family set via `Icon.setDefaultIconType()`
+     * Defaults to global family set via `Icon.setDefaultIconType()`
      *
-     * Ultimately defaults to `fa`, if family is not set anywhere
+     * Ultimately defaults to `fa`, if family is not set anywhere
      *
      * @type {''|'fa'|'lar'|'las'|'gg'|'unicons'}
      */
@@ -111,5 +111,5 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `"null"`
   let klass = "";
   export { klass as class };
 
-  $: has_icon = icon && icon != "";
+  $: has_icon = icon && icon !== "";
 </script>

package/controls/FileUpload.svelte

@@ -170,7 +170,7 @@ The following functions are returned in `event.detail`:
 
   $: {
     fileTypes =
-      allowed != "*" && Array.isArray(allowed) && allowed.length
+      allowed !== "*" && Array.isArray(allowed) && allowed.length
         ? allowed.join(", ")
         : "";
     _progress = Math.floor((_uploaded / _total) * 100);
@@ -256,18 +256,18 @@ The following functions are returned in `event.detail`:
       } else {
         size = 0;
       }
-      val = val.split(/[\/\\]+/);
+      val = val.split(/[/\\]+/);
       val = val[val.length - 1];
       ext = val.split(/\./);
       ext = ext[ext.length - 1];
       ext = ext.toLowerCase();
-      if (size == 0) {
+      if (size === 0) {
         valid = false;
         val = "No file selected";
       }
 
       //check if file extension is allowed
-      if (allowed != "*") {
+      if (allowed !== "*") {
         if (typeof allowed.length != "undefined") {
           if (allowed.indexOf(ext) === -1) {
             valid = false;

package/controls/NumberInput.svelte

@@ -183,7 +183,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 = value.toFixed(1);
   };
 
   function validateInput() {
@@ -194,7 +194,7 @@ This will be overridden if `min` is higher, or `max` is lower, Default: `0`
     if (value < min) value = min;
     if (value > max) value = max;
 
-    if (_old_value != value) {
+    if (_old_value !== value) {
       _old_value = value;
       /**
        * Triggered when value changes

package/controls/ToggleButtons.svelte

@@ -34,7 +34,7 @@ This property can be bound to, to fetch the current value, Default: `null`
         type="button"
         {disabled}
         on:click={setValue(option.value)}
-        class="button is-{size}  {fullwidth ? 'is-fullwidth' : ''} {value ==
+        class="button is-{size}  {fullwidth ? 'is-fullwidth' : ''} {value ===
         option.value
           ? 'is-active ' +
             (option.active_class ? option.active_class : active_class)

package/datagrid/DataSearch/DataSearch.svelte

@@ -23,7 +23,7 @@
     {#if hasSearch}
       <div class="control is-expanded main-search">
         <input
-          class="input {query != '' && query != undefined
+          class="input {query !== '' && query !== undefined
             ? filter_in_use_class
             : filter_not_in_use_class}"
           type="text"
@@ -32,14 +32,14 @@
       </div>
     {/if}
     {#if hasFilters}
-      {#each _filters as filter, i}
+      {#each _filters as filter}
         <svelte:component
           this={usedFilterComponent}
           {filterVals}
           {filter}
           {filterWidthStyle}
-          hilightClass={filterVals[filter.name] != "" &&
-          filterVals[filter.name] != undefined
+          hilightClass={filterVals[filter.name] !== "" &&
+          filterVals[filter.name] !== undefined
             ? filter_in_use_class
             : filter_not_in_use_class}
           {filter_label_map} />
@@ -117,7 +117,7 @@
     filterWidthStyle = "";
 
   $: usedFilterComponent = filterComponent ? filterComponent : SearchFilter;
-  $: changed = q && q.trim() != "";
+  $: changed = q && q.trim() !== "";
   $: q, qHasChanged();
   $: filters, filtersHaveChanged();
 
@@ -152,7 +152,7 @@
   }
 
   function qHasChanged() {
-    if (q == "") {
+    if (q === "") {
       //bail out early and reset all filters
       //this happens when using back/forward browser buttons
       return doresetSearch();
@@ -183,6 +183,7 @@
       filterVals[i] = "";
     }
     query = "";
+    // eslint-disable-next-line no-self-assign
     filterVals = filterVals;
 
     /**

package/datagrid/DataSearch/SearchFilter.svelte

@@ -10,8 +10,11 @@
 
 -->
 
-{#if filter.type == "multiselect"}
-  <div class="control search-control" style={filterWidthStyle}>
+{#if filter.type === "multiselect"}
+  <div
+    class="control search-control"
+    class:is-expanded={shouldExpandToFill}
+    style={filterWidthStyle}>
     <MultiSelect
       options={sanitizedOptions}
       placeholder={`Any ${name}`}
@@ -22,15 +25,21 @@
       summary_mode
       class={hilightClass} />
   </div>
-{:else if filter.type == "date"}
-  <div class="control search-control" style={filterWidthStyle}>
+{:else if filter.type === "date"}
+  <div
+    class="control search-control"
+    class:is-expanded={shouldExpandToFill}
+    style={filterWidthStyle}>
     <Datepicker
       class={hilightClass}
       bind:value={filterVals[filter.name]}
       placeholder="{capitaliseFirstLetter(name)} Date" />
   </div>
-{:else if filter.type == "daterange"}
-  <div class="control search-control" style={filterWidthStyle}>
+{:else if filter.type === "daterange"}
+  <div
+    class="control search-control"
+    class:is-expanded={shouldExpandToFill}
+    style={filterWidthStyle}>
     <Datepicker
       class={hilightClass}
       bind:value={filterVals[filter.name]}
@@ -38,7 +47,10 @@
       placeholder="{capitaliseFirstLetter(name)} Date Range" />
   </div>
 {:else if filter.options.length > 10}
-  <div class="control search-control" style={filterWidthStyle}>
+  <div
+    class="control search-control"
+    class:is-expanded={shouldExpandToFill}
+    style={filterWidthStyle}>
     <SearchableSelect
       options={sanitizedOptions}
       placeholder={`Any ${name}`}
@@ -50,12 +62,13 @@
 {:else}
   <div
     class="select control search-control {hilightClass}"
+    class:is-expanded={shouldExpandToFill}
     style={filterWidthStyle}
     data-cy="select-container">
     <select
       bind:value={filterVals[filter.name]}
       class="is-radiusless {hilightClass}"
-      style="max-width:100%"
+      style="max-width:100%;width:100%;"
       data-cy={cy}>
       {#each sanitizedOptions as option}
         {#if option}
@@ -103,6 +116,8 @@
 
   $: filterVals, filter, convertToValuesArray();
 
+  $: shouldExpandToFill = !filterWidthStyle || filterWidthStyle.trim() === "";
+
   function convertValuesToString() {
     tick().then(() => {
       filterVals[filter.name] = multiSelectValue
@@ -111,7 +126,7 @@
     });
   }
   function convertToValuesArray() {
-    if (filter && filter.type == "multiselect") {
+    if (filter && filter.type === "multiselect") {
       multiSelectValue = filterVals[filter.name]
         ? filterVals[filter.name].split("|")
         : [];
@@ -122,7 +137,7 @@
     let options = filter.options || [];
     if (options.length) {
       options =
-        filter.type == "multiselect"
+        filter.type === "multiselect"
           ? options
           : [{ id: "", name: `Any ${name}` }, ...options];
       options = options.map((el) => {

package/datagrid/GridView/GridCell.svelte

@@ -11,6 +11,7 @@
 -->
 
 <td class={classNames(column, row)} style={styles(column, row)}>
+  <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
   {@html transforms(column, row)}
 </td>
 

package/datagrid/GridView/GridRow.svelte

@@ -164,7 +164,7 @@
 
   function setCheckedValue() {
     checked = false;
-    if (selectedIds.indexOf(row.id) != -1) {
+    if (selectedIds.indexOf(row.id) !== -1) {
       checked = true;
     }
   }

package/datagrid/Pagination/Pagination.svelte

@@ -2,21 +2,36 @@
   @component
 
 
-  @param {object} [meta={}] - Contains the total, count, limit, offset values, Default: `{}`
+  @param {object} [meta={}] - Object containing `total`, `count`, `limit` and `offset` values
+
+**DEPRECATED**: Use `total`, `count`, `limit` and `offset`  props instead, Default: `{}`
+  @param {number} [limit=0] - How many items are meant to be per page, Default: `0`
+  @param {number} [count=0] - How many items are actually in this page, Default: `0`
+  @param {number} [total=0] - Total number of items available, Default: `0`
+  @param {number} [offset=0] - Offset of the first item in this page, Default: `0`
   @param {boolean} [showTotal=true] - Determines whether to show total or not, Default: `true`
   @param {boolean} [showCurrent=true] - Determines whether to show current page details, Default: `true`
   @param {boolean} [showPerPage=true] - Determines whether to show per page options, Default: `true`
-  @param {number} [breakThreshold=10] - Limit the number of visible pages in pagination, Default: `10`
+  @param {number} [maxVisiblePages=10] - Maximum number of consecutive pages to show in pagination after which a break is introduced in between them, Default: `10`
   @param {string} [entityName="entries"] - String to display total entries, Default: `"entries"`
-  @param {string} [size="small"] - Size of the pagination, Default: `"small"`
+  @param {''|'small'|'medium'|'large'} [size="small"] - Size of the pagination elements, Default: `"small"`
   @param {boolean} [frame=false] - Determines whether to show pagination frame or not, Default: `false`
   @param {string} [iconRight="chevron-right"] - Right navigation icon, Default: `"chevron-right"`
   @param {string} [iconLeft="chevron-left"] - Left navigation icon, Default: `"chevron-left"`
-  @param {array} [perPageOptions=[]] - Determines the number of rows displayed in a page., Default: `[]`
+  @param {array} [perPageOptions=[]] - Displays the options for how many items to show per page, Default: `[]`
+  @method `goto(targetPage)` - Go to an arbitrary page number
+  @method `prev()` - Go to the previous page
+  @method `next()` - Go to the next page
+  @method `first()` - Go to the first page
+  @method `last()` - Go to the last page
 
   ### Events
-  - `setLimit` - Event used to set limit of pagination
-  - `paginate` - Event triggered on paginate
+  - `setLimit` - Event used to set a new `limit`.
+
+*Event Data:* `{currentPage, newLimit}`
+  - `paginate` - Event triggered on pagination change with new `offset` and current `limit` values.
+
+*Event Data:* `{offset, limit}`
 
 -->
 <div
@@ -34,9 +49,7 @@
                 <li>
                   <button
                     type="button"
-                    class="pagination-link {meta.limit == v
-                      ? 'is-current'
-                      : ''}"
+                    class="pagination-link {_limit === v ? 'is-current' : ''}"
                     on:click={() => setLimit(v)}>{k}</button>
                 </li>
               {/each}
@@ -49,9 +62,8 @@
           {#if showTotal}
             <strong>Total {totalItems} {entityName}</strong>
           {:else if showCurrent}
-            {#if meta.total > 0}Showing {meta.offset * 1 + 1} to {meta.offset *
-                1 +
-                meta.count * 1}{/if}
+            {#if _total > 0}Showing {_offset * 1 + 1} to {_offset * 1 +
+                _count * 1}{/if}
           {/if}
         </div>
       {/if}
@@ -59,14 +71,14 @@
 
     {#if showCurrent && showTotal && !showPerPage}
       <div class="level-item pagination-showing">
-        {#if meta.total > 0}
-          Showing {meta.offset * 1 + 1} to {meta.offset * 1 + meta.count * 1}
+        {#if _total > 0}
+          Showing {_offset * 1 + 1} to {_offset * 1 + _count * 1}
         {/if}
       </div>
     {:else if showPerPage && showCurrent}
       <div class="level-item pagination-showing">
-        {#if meta.total > 0}
-          Showing {meta.offset * 1 + 1} to {meta.offset * 1 + meta.count * 1}
+        {#if _total > 0}
+          Showing {_offset * 1 + 1} to {_offset * 1 + _count * 1}
           {#if showTotal}
             |&nbsp;
           {/if}
@@ -82,25 +94,25 @@
     {/if}
 
     <div class="level-right">
-      {#if meta.total > 0}
+      {#if _total > 0}
         <nav class="pagination is-centered {size ? 'is-' + size : ''}">
           <button
             type="button"
             on:click={prev}
-            class="pagination-previous {meta.offset == 0 ? 'is-disabled' : ''}">
-            <Icon {size} icon={iconLeft} />
+            class="pagination-previous {_offset === 0 ? 'is-disabled' : ''}">
+            <Icon icon={iconLeft} />
           </button>
           <button
             type="button"
             on:click={next}
-            class="pagination-next {currentPage + 1 == totalPages
+            class="pagination-next {currentPage + 1 === totalPages
               ? 'is-disabled'
               : ''}">
-            <Icon {size} icon={iconRight} />
+            <Icon icon={iconRight} />
           </button>
           <ul class="pagination-list" data-cy="pagination-list">
             {#each pages as page}
-              {#if page.p == "sep"}
+              {#if page.p === "sep"}
                 <li>
                   <span class="pagination-ellipsis">&hellip;</span>
                 </li>
@@ -108,7 +120,7 @@
                 <li>
                   <button
                     type="button"
-                    class="pagination-link {page.p == currentPage
+                    class="pagination-link {page.p === currentPage
                       ? 'is-current'
                       : ''}"
                     on:click={() => goto(page.p + 1)}>{page.p + 1}</button>
@@ -129,15 +141,32 @@
   const fire = createEventDispatcher();
 
   /**
-   * Contains the total, count, limit, offset values
+   * Object containing `total`, `count`, `limit` and `offset` values
+   *
+   * **DEPRECATED**: Use `total`, `count`, `limit` and `offset`  props instead
    */
   export let meta = {
       limit: 0,
       total: 0,
       count: 0,
       offset: 0,
-      status: "",
     },
+    /**
+     * How many items are meant to be per page
+     */
+    limit = 0,
+    /**
+     * How many items are actually in this page
+     */
+    count = 0,
+    /**
+     * Total number of items available
+     */
+    total = 0,
+    /**
+     * Offset of the first item in this page
+     */
+    offset = 0,
     /**
      * Determines whether to show total or not
      */
@@ -151,15 +180,16 @@
      */
     showPerPage = true,
     /**
-     * Limit the number of visible pages in pagination
+     * Maximum number of consecutive pages to show in pagination after which a break is introduced in between them
      */
-    breakThreshold = 10,
+    maxVisiblePages = 10,
     /**
      * String to display total entries
      */
     entityName = "entries",
     /**
-     * Size of the pagination
+     * Size of the pagination elements
+     * @type {''|'small'|'medium'|'large'}
      */
     size = "small",
     /**
@@ -175,15 +205,20 @@
      */
     iconLeft = "chevron-left",
     /**
-     * Determines the number of rows displayed in a page.
+     * Displays the options for how many items to show per page
      */
     perPageOptions = [20, 50, 100, 150, 200, 250];
 
   let pages = [],
     _perPageOptions = 0;
 
+  $: _total = total || meta.total || 0;
+  $: _count = count || meta.count || 0;
+  $: _offset = offset || meta.offset || 0;
+  $: _limit = limit || meta.limit || 0;
+
   $: {
-    let max = meta.total,
+    let max = _total,
       ppo = perPageOptions || [],
       ppmax = Math.max(...ppo),
       ret = {};
@@ -204,10 +239,10 @@
     _perPageOptions = ret;
   }
 
-  $: totalItems = meta && meta.total ? meta.total : 0;
-  $: currentPage = Math.floor(meta.offset / meta.limit);
-  $: totalPages = Math.ceil(meta.total / (meta.limit || 1));
-  $: totalPages, currentPage, breakThreshold, calculatePages();
+  $: totalItems = meta && _total ? _total : 0;
+  $: currentPage = Math.floor(_offset / _limit);
+  $: totalPages = Math.ceil(_total / (_limit || 1));
+  $: totalPages, currentPage, maxVisiblePages, calculatePages();
 
   function calculatePages() {
     pages = new Array(totalPages || 0);
@@ -216,17 +251,21 @@
       ret = [];
 
     for (var i = 0; i < total; i++) {
-      if (total > breakThreshold) {
-        if (i < 3) {
+      if (total > maxVisiblePages) {
+        let threshold = Math.max(
+          Math.floor(maxVisiblePages / 3),
+          Math.min(3, maxVisiblePages - 3)
+        );
+        if (i < threshold) {
           ret.push({ p: i });
-        } else if (i > total - 4) {
+        } else if (i >= total - threshold) {
           ret.push({ p: i });
-        } else if (i == Math.floor(total / 2)) {
+        } else if (i === Math.floor(total / 2)) {
           ret.push({ p: i });
         } else if (
-          i == currentPage ||
-          i == currentPage - 1 ||
-          i == currentPage + 1
+          i === currentPage ||
+          i === currentPage - 1 ||
+          i === currentPage + 1
         ) {
           ret.push({ p: i });
         }
@@ -237,10 +276,10 @@
 
     let _prev = 0,
       items = []; // _prev was prev
-    if (total > breakThreshold) {
+    if (total > maxVisiblePages) {
       for (var j = 0; j < ret.length; j++) {
         var page = ret[j].p;
-        if (page != _prev + 1 && page != 0) {
+        if (page !== _prev + 1 && page !== 0) {
           items.push({ p: "sep" });
         }
         items.push(ret[j]);
@@ -255,31 +294,56 @@
 
   function setLimit(limit) {
     /**
-     * Event used to set limit of pagination
+     * Event used to set a new `limit`.
+     *
+     * *Event Data:* `{currentPage, newLimit}`
      */
     fire("setLimit", { currentPage, newLimit: limit });
   }
-  function goto(pagenum) {
-    let limit = meta.limit,
-      i = pagenum - 1,
-      offset = limit * i;
-    if (offset >= 0 && offset != meta.offset && offset < meta.total) {
+
+  /**
+   * Go to an arbitrary page number
+   * @param {int} targetPage
+   */
+  export function goto(targetPage) {
+    let limit = _limit,
+      i = targetPage - 1,
+      __offset = limit * i;
+    if (__offset >= 0 && __offset !== _offset && __offset < _total) {
       /**
-       * Event triggered on paginate
+       * Event triggered on pagination change with new `offset` and current `limit` values.
+       *
+       * *Event Data:* `{offset, limit}`
        */
-      fire("paginate", { offset, limit });
+      fire("paginate", { offset: __offset, limit });
     }
   }
-  function prev() {
+
+  /**
+   * Go to the previous page
+   */
+  export function prev() {
     goto(currentPage);
   }
-  function next() {
+
+  /**
+   * Go to the next page
+   */
+  export function next() {
     goto(currentPage + 2);
   }
-  function first() {
+
+  /**
+   * Go to the first page
+   */
+  export function first() {
     goto(1);
   }
-  function last() {
+
+  /**
+   * Go to the last page
+   */
+  export function last() {
     goto(totalPages);
   }
 </script>

package/datagrid/TileView/TileViewItem.svelte

@@ -22,6 +22,7 @@
   {#each column_keys as column}
     {#if isVisible(column)}
       <div class={classNames(column, row)} style={styles(column, row)}>
+        <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
         {@html transforms(column, row)}
       </div>
     {/if}

package/forms/MaskedInput.svelte

@@ -32,7 +32,7 @@ Requires `guide` to be `true`, Default: `false`
   bind:this={inputElement} />
 
 <script>
-  import { onMount, tick } from "svelte";
+  import { onMount } from "svelte";
   import {
     createTextMaskInputElement,
     conformToMask,