@kws3/ui 1.7.0 → 1.7.1

package/CHANGELOG.mdx

@@ -1,5 +1,14 @@
+## 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 indepnedent of the global $colors SCSS variable.
+- 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.

package/buttons/SubmitButton.svelte

@@ -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,7 +10,7 @@
 
 -->
 
-{#if filter.type == "multiselect"}
+{#if filter.type === "multiselect"}
   <div
     class="control search-control"
     class:is-expanded={shouldExpandToFill}
@@ -25,7 +25,7 @@
       summary_mode
       class={hilightClass} />
   </div>
-{:else if filter.type == "date"}
+{:else if filter.type === "date"}
   <div
     class="control search-control"
     class:is-expanded={shouldExpandToFill}
@@ -35,7 +35,7 @@
       bind:value={filterVals[filter.name]}
       placeholder="{capitaliseFirstLetter(name)} Date" />
   </div>
-{:else if filter.type == "daterange"}
+{:else if filter.type === "daterange"}
   <div
     class="control search-control"
     class:is-expanded={shouldExpandToFill}
@@ -116,7 +116,7 @@
 
   $: filterVals, filter, convertToValuesArray();
 
-  $: shouldExpandToFill = !filterWidthStyle || filterWidthStyle.trim() == "";
+  $: shouldExpandToFill = !filterWidthStyle || filterWidthStyle.trim() === "";
 
   function convertValuesToString() {
     tick().then(() => {
@@ -126,7 +126,7 @@
     });
   }
   function convertToValuesArray() {
-    if (filter && filter.type == "multiselect") {
+    if (filter && filter.type === "multiselect") {
       multiSelectValue = filterVals[filter.name]
         ? filterVals[filter.name].split("|")
         : [];
@@ -137,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 {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
      */
@@ -159,7 +188,8 @@
      */
     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,9 +239,9 @@
     _perPageOptions = ret;
   }
 
-  $: totalItems = meta && meta.total ? meta.total : 0;
-  $: currentPage = Math.floor(meta.offset / meta.limit);
-  $: totalPages = Math.ceil(meta.total / (meta.limit || 1));
+  $: totalItems = meta && _total ? _total : 0;
+  $: currentPage = Math.floor(_offset / _limit);
+  $: totalPages = Math.ceil(_total / (_limit || 1));
   $: totalPages, currentPage, breakThreshold, calculatePages();
 
   function calculatePages() {
@@ -221,12 +256,12 @@
           ret.push({ p: i });
         } else if (i > total - 4) {
           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 });
         }
@@ -240,7 +275,7 @@
     if (total > breakThreshold) {
       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 +290,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,

package/forms/PasswordValidator/validatePassword.js

@@ -7,7 +7,7 @@ export default function (password, options) {
   result.items = (options || []).slice().map((_opt) => {
     const opt = Object.assign({}, _opt);
     if (opt && opt.active) {
-      if (opt.name == "kws_pv_min_length") {
+      if (opt.name === "kws_pv_min_length") {
         if (password && password.length >= opt.value) {
           opt.passed = true;
         }
@@ -24,7 +24,7 @@ export default function (password, options) {
   });
 
   result.overall =
-    result.items.filter((el) => el.passed).length == result.items.length;
+    result.items.filter((el) => el.passed).length === result.items.length;
 
   return result;
 }

package/forms/actions.js

@@ -3,6 +3,7 @@ import flatpickr from "flatpickr";
 function createFlatpickrAction(defaultOpts, hooks) {
   return function (
     node,
+    // eslint-disable-next-line no-unused-vars
     { opts, value, placeholder, klass, style, disabled, color }
   ) {
     const _opts = {};
@@ -50,7 +51,7 @@ function createFlatpickrAction(defaultOpts, hooks) {
     function applyColorClass(instance, color) {
       let contains = false;
       instance.calendarContainer.classList.forEach((c) => {
-        if (c.charAt(3).toLowerCase() == "is-") {
+        if (c.charAt(3).toLowerCase() === "is-") {
           contains = c;
         }
       });

package/forms/colorpicker/Colorpicker.js

@@ -255,7 +255,9 @@ export default (function (win, doc) {
 
       // get mouse/finger coordinate
       function point(el, e) {
+        // eslint-disable-next-line no-extra-boolean-cast
         var x = !!e.touches ? e.touches[0].pageX : e.pageX,
+          // eslint-disable-next-line no-extra-boolean-cast
           y = !!e.touches ? e.touches[0].pageY : e.pageY,
           left = offset(el).l,
           top = offset(el).t;
@@ -396,18 +398,21 @@ export default (function (win, doc) {
           H_point_H = size(H_point).h,
           SV_point_W = SV_point_size.w,
           SV_point_H = SV_point_size.h;
+
+        function click(e) {
+          var t = e.target,
+            is_target = t === target || closest(t, target) === target;
+          if (is_target) {
+            create();
+          } else {
+            $.exit();
+          }
+          trigger(is_target ? "enter" : "exit", [$]);
+        }
+
         if (first) {
           picker.style.left = picker.style.top = "-9999px";
-          function click(e) {
-            var t = e.target,
-              is_target = t === target || closest(t, target) === target;
-            if (is_target) {
-              create();
-            } else {
-              $.exit();
-            }
-            trigger(is_target ? "enter" : "exit", [$]);
-          }
+
           if (events !== false) {
             on(events, target, click);
           }
@@ -430,7 +435,7 @@ 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";
         };
-        $.exit = function (e) {
+        $.exit = function () {
           if (visible()) {
             visible().removeChild(picker);
             $.visible = false;
@@ -443,8 +448,8 @@ export default (function (win, doc) {
           return $;
         };
         function color(e) {
-          var a = HSV2RGB(HSV),
-            b = HSV2RGB([HSV[0], 1, 1]);
+          //var a = HSV2RGB(HSV),
+          var b = HSV2RGB([HSV[0], 1, 1]);
           SV.style.backgroundColor = "rgb(" + b.join(",") + ")";
           set_data(HSV);
           prevent(e);