@kws3/ui 1.6.7 → 1.7.1

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);

package/forms/colorpicker/Colorpicker.svelte

@@ -116,7 +116,7 @@ This property can be bound to, to fetch the current colour, Default: `"000000"`
     e && e.target && e.target.select();
   }
 
-  function onDragOver(e) {
+  function onDragOver() {
     if (!readonly && !disabled) {
       dragover = true;
     }
@@ -131,7 +131,7 @@ This property can be bound to, to fetch the current colour, Default: `"000000"`
     return false;
   }
 
-  function onDragLeave(e) {
+  function onDragLeave() {
     if (!readonly && !disabled) {
       dragover = false;
     }

package/forms/select/MultiSelect.svelte

@@ -22,9 +22,7 @@ this property of each object will be returned as the value, Default: `"id"`
   @param {boolean} [readonly=false] - Marks component as read-only, Default: `false`
   @param {boolean} [disabled=false] - Disables the component, Default: `false`
   @param {string} [selected_icon="check"] - Icon used to mark selected items in dropdown list, Default: `"check"`
-  @param {boolean} [summary_mode=false] - When activated, it will show the number of selected items.
-
-Instead of listing all the selected items inside the input., Default: `false`
+  @param {boolean} [summary_mode=false] - Shows only the number of items selected, instead of listing all the selected items in the input., Default: `false`
   @param {string} [no_options_msg="No matching options"] - Message to display when no matching options are found, Default: `"No matching options"`
   @param {string} [remove_btn_tip="Remove"] - Tooltip text for Remove Item button. This `string` will precede the selected Item Name in the tooltip., Default: `"Remove"`
   @param {string} [remove_all_tip="Remove all"] - Tooltip text for the Clear All button, Default: `"Remove all"`
@@ -66,7 +64,7 @@ Default value: `<span>{option[search_key] || option}</span>`
         </li>
         <li
           class="tag is-{size} summary-text  is-{color || 'primary'} is-light">
-          Item{selectedOptions.length == 1 ? "" : "s"} selected
+          Item{selectedOptions.length === 1 ? "" : "s"} selected
         </li>
       {:else}
         {#each selectedOptions as tag}
@@ -225,9 +223,7 @@ Default value: `<span>{option[search_key] || option}</span>`
    */
   export let selected_icon = "check";
   /**
-   * When activated, it will show the number of selected items.
-   *
-   * Instead of listing all the selected items inside the input.
+   * Shows only the number of items selected, instead of listing all the selected items in the input.
    */
   export let summary_mode = false;
   /**
@@ -298,9 +294,10 @@ Default value: `<span>{option[search_key] || option}</span>`
   $: _placeholder = hasValue ? "" : placeholder;
 
   //ensure search_key and value_key are no empty strings
-  $: used_search_key = search_key && search_key != "" ? search_key : "name";
-  $: used_value_key = value_key && value_key != "" ? value_key : "id";
+  $: used_search_key = search_key && search_key !== "" ? search_key : "name";
+  $: used_value_key = value_key && value_key !== "" ? value_key : "id";
 
+  // eslint-disable-next-line no-redeclare
   $: shouldShowClearAll = hasValue;
 
   $: options, normaliseOptions();
@@ -322,7 +319,7 @@ Default value: `<span>{option[search_key] || option}</span>`
   //TODO: optimise isSelected function
   $: isSelected = (option) => {
     if (single) return matchesValue(value, option);
-    if (!(value && value.length > 0) || value == "") return false;
+    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));
   };
@@ -384,13 +381,13 @@ Default value: `<span>{option[search_key] || option}</span>`
   function fillSelectedOptions() {
     if (single) {
       selectedOptions = normalisedOptions.filter(
-        (v) => `${v[used_value_key]}` == `${value}`
+        (v) => `${v[used_value_key]}` === `${value}`
       );
       setSingleVisibleValue();
     } else {
       selectedOptions = normalisedOptions
         .filter(
-          (v) => value && value.some((vl) => `${v[used_value_key]}` == `${vl}`)
+          (v) => value && value.some((vl) => `${v[used_value_key]}` === `${vl}`)
         )
         .sort(
           (a, b) =>
@@ -440,7 +437,8 @@ Default value: `<span>{option[search_key] || option}</span>`
     if (!isAlreadySelected && !single && (max === null || value.length < max)) {
       //attach to value array while filtering out invalid values
       value = [...value, token[used_value_key]].filter((v) => {
-        return normalisedOptions.filter((nv) => nv[used_value_key] == v).length;
+        return normalisedOptions.filter((nv) => nv[used_value_key] === v)
+          .length;
       });
       searchText = ""; // reset search string on selection
 

package/helpers/Dialog/Dialog.svelte

@@ -30,15 +30,16 @@ For internal use only - not part of config object, Default: `""`
 <CardModal title={titleToUse} {size} {is_active} closable={false}>
   <div slot="default">
     <div class="columns is-vcentered is-mobile">
-      {#if icon && icon != ""}
+      {#if icon && icon !== ""}
         <div class="column is-narrow">
           <Icon {icon} size={icon_size} color={icon_color} />
         </div>
       {/if}
       <div class="column">
         <div>
+          <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
           <span class="is-block">{@html _text}</span>
-          {#if _type == "prompt"}
+          {#if _type === "prompt"}
             <div class="field" style="margin-top:0.5rem;">
               <div class="control">
                 <input
@@ -50,7 +51,7 @@ For internal use only - not part of config object, Default: `""`
               </div>
             </div>
           {/if}
-          {#if help_text && help_text != ""}
+          {#if help_text && help_text !== ""}
             <span class="help">{help_text}</span>
           {/if}
         </div>
@@ -59,20 +60,24 @@ For internal use only - not part of config object, Default: `""`
   </div>
   <div slot="footer" style="width:100%">
     <div class="field is-grouped is-grouped-right">
-      {#if _type != "alert"}
+      {#if _type !== "alert"}
         <div class="control">
-          <button on:click={cancel} class="button is-{cancel_button_color}"
-            >{#if cancel_button_icon != ""}<Icon
+          <button
+            type="button"
+            on:click={cancel}
+            class="button is-{cancel_button_color}"
+            >{#if cancel_button_icon !== ""}<Icon
                 icon={cancel_button_icon}
                 size="small" />{/if}<span>{cancel_button_text}</span></button>
         </div>
       {/if}
       <div class="control">
         <button
+          type="button"
           bind:this={ok_button}
           on:click={ok}
           class="button is-{ok_button_color}"
-          >{#if ok_button_icon != ""}<Icon
+          >{#if ok_button_icon !== ""}<Icon
               icon={ok_button_icon}
               size="small" />{/if}<span>{ok_button_text}</span></button>
       </div>
@@ -170,7 +175,7 @@ For internal use only - not part of config object, Default: `""`
     input_box,
     ok_button;
 
-  $: titleToUse = title != "" ? title : capitaliseFirstLetter(_type);
+  $: titleToUse = title !== "" ? title : capitaliseFirstLetter(_type);
 
   /**
    * Determines the type of Dialog.
@@ -204,13 +209,10 @@ For internal use only - not part of config object, Default: `""`
     switch (_type) {
       case "alert":
         return;
-        break;
       case "confirm":
         return true;
-        break;
       case "prompt":
         return input_value;
-        break;
     }
   }
 
@@ -218,13 +220,10 @@ For internal use only - not part of config object, Default: `""`
     switch (_type) {
       case "alert":
         return;
-        break;
       case "confirm":
         return false;
-        break;
       case "prompt":
         return null;
-        break;
     }
   }
 

package/helpers/Divider.svelte

@@ -0,0 +1,55 @@
+<!--
+  @component
+
+
+  @param {'' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link' | 'dark' | 'light'} [color=""] - Color of the Divider lines, Default: `""`
+  @param {boolean} [light=false] - Whether to display a lighter variant of the `color`, Default: `false`
+  @param {boolean} [vertical=false] - Whether to orient the Divider vertically. Vertical Divider take up the height of their parent., Default: `false`
+  @param {'center' | 'left' | 'right' | 'top' | 'bottom'} [alignment="center"] - Alignment of the Divider text. `top`/`left` and `bottom`/`right` are analogous for vertical Dividers, Default: `"center"`
+  @param {string} [style=""] - Inline CSS styles for the Divider, Default: `""`
+  @param {string} [class=""] - CSS class for Divider, Default: `""`
+
+  ### Slots
+  - `<slot name="default"  />` - Default slot for text inside Divider
+
+-->
+
+<div
+  class:is-vertical={vertical}
+  class:is-light={light}
+  class="kws-divider is-{alignment} is-{color} {klass}"
+  {style}>
+  <!--Default slot for text inside Divider--><slot />
+</div>
+
+<script>
+  /**
+   * Color of the Divider lines
+   * @type {'' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link' | 'dark' | 'light'}
+   */
+  export let color = "",
+    /**
+     * Whether to display a lighter variant of the `color`
+     */
+    light = false,
+    /**
+     * Whether to orient the Divider vertically. Vertical Divider take up the height of their parent.
+     */
+    vertical = false,
+    /**
+     * Alignment of the Divider text. `top`/`left` and `bottom`/`right` are analogous for vertical Dividers
+     * @type {'center' | 'left' | 'right' | 'top' | 'bottom'}
+     */
+    alignment = "center",
+    /**
+     * Inline CSS styles for the Divider
+     */
+    style = "";
+
+  /**
+   * CSS class for Divider
+   * @type {string}
+   */
+  let klass = "";
+  export { klass as class };
+</script>