@kws3/ui 1.7.0 → 1.7.3

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>

package/helpers/FloatingUI/Floatie.svelte

@@ -18,12 +18,13 @@
 
 -->
 
-{#if variant == "snackbar"}
+{#if variant === "snackbar"}
   <div class="snackbar is-{color} {light ? 'is-light' : ''}">
     <div class="text">{message}</div>
     <div class="action">
       {#each buttonsToRender as { text, color: text_color, click }}
         <button
+          type="button"
           class="button is-{color} has-text-{text_color}"
           on:click={click}
           on:click={destroy}>{text}</button>
@@ -33,7 +34,7 @@
       <div class="floatie-progress" style="animation-duration:{duration}ms" />
     {/if}
   </div>
-{:else if variant == "toast"}
+{:else if variant === "toast"}
   <div class="toast is-{color} {light ? 'is-light' : ''}">
     {message}
   </div>
@@ -43,12 +44,13 @@
       <svelte:component this={component} {...$$props} on:destroy={destroy} />
     {:else}
       {#if dismissable}
-        <button class="delete" on:click={destroy} />
+        <button type="button" class="delete" on:click={destroy} />
       {/if}
       {#if title}
         <h4 class="title is-5 is-marginless">{title}</h4>
       {/if}
 
+      <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
       <p>{@html message}</p>
 
       {#if !persistent}
@@ -109,11 +111,15 @@
     /**
      * Callback function call before close event
      */
-    beforeClose = (props) => {},
+    beforeClose = (props) => {
+      props;
+    },
     /**
      * Callback function call after close event
      */
-    afterClose = (props) => {},
+    afterClose = (props) => {
+      props;
+    },
     /**
      * List of buttons to show in snackbar
      */

package/helpers/FloatingUI/index.js

@@ -62,7 +62,7 @@ export const FloatiesStore = (() => {
         newItem.variant = "notification";
       }
 
-      if (!newItem.position || newItem.position == "") {
+      if (!newItem.position || newItem.position === "") {
         newItem.position = DEFAULT_POSITIONS[newItem.variant];
       }
 
@@ -88,7 +88,7 @@ export const FloatiesStore = (() => {
       let _items = items[_position][_variant];
 
       items[_position][_variant] = _items.slice().filter((el) => {
-        return el && el.id && el.id != props.id;
+        return el && el.id && el.id !== props.id;
       });
 
       return items;

package/helpers/Icon.svelte

@@ -99,7 +99,7 @@ Ultimately defaults to `fa`, if family is not set anywhere, Default: `""`
 
   $: {
     usedFamily =
-      family && family != "" ? family : globalFamily ? globalFamily : "fa";
+      family && family !== "" ? family : globalFamily ? globalFamily : "fa";
 
     switch (usedFamily) {
       case "lar":

package/helpers/Loader.svelte

@@ -5,7 +5,7 @@
   @param {'grey' | 'light' | 'warning' | 'info' | 'danger' | 'primary' | 'success'} [spinner_color="grey"] - Color of the Spinner, Default: `"grey"`
   @param {'small'|'medium'|'large'} [spinner_size="medium"] - Size of the Spinner, Default: `"medium"`
   @param {'transparent' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link'} [background_color="transparent"] - Backgound color of the Spinner container, Default: `"transparent"`
-  @param {string} [background_size="medium"] - Size of the Spinner container.  It can also accept css units
+  @param {string} [background_size="medium"] - Size of the Spinner container. It can also accept css units
 
 **Examples:** `small` | `medium` | `large` | `halfheight` | `fullheight` | `10px` | `5rem` | `100vh`, Default: `"medium"`
   @param {boolean} [is_inline=false] - Determines if the Loader is inline or not, Default: `false`
@@ -48,7 +48,7 @@ The overlay is absolutely positioned. Ensure that the parent container is relati
      */
     background_color = "transparent",
     /**
-     * Size of the Spinner container.  It can also accept css units
+     * Size of the Spinner container. It can also accept css units
      *
      * **Examples:** `small` | `medium` | `large` | `halfheight` | `fullheight` | `10px` | `5rem` | `100vh`
      */
@@ -86,14 +86,14 @@ The overlay is absolutely positioned. Ensure that the parent container is relati
 
   function determineHeightStyles() {
     if (
-      bg_sizes.indexOf(background_size) == -1 &&
+      bg_sizes.indexOf(background_size) === -1 &&
       typeof background_size == "string" &&
       background_size.length
     ) {
       _height = "height: " + background_size + ";";
 
       _style =
-        (style.length && style.charAt(style.length - 1) != ";"
+        (style.length && style.charAt(style.length - 1) !== ";"
           ? style + ";"
           : style) + _height;
       _background_size = "";

package/helpers/Message.svelte

@@ -41,7 +41,10 @@ The parent can then decide what to do with the component
         <slot name="title"><p>{title}</p></slot>
       {/if}
       {#if dismissable}
-        <button class="delete is-pulled-right is-{size}" on:click={dismiss} />
+        <button
+          type="button"
+          class="delete is-pulled-right is-{size}"
+          on:click={dismiss} />
       {/if}
     </div>
     <div class="message-body {inner_class}" style={inner_style}>

package/helpers/Modal.svelte

@@ -13,6 +13,8 @@ Only programmatic closing is possible, Default: `true`
   @param {string} [inner_class=""] - CSS classes for modal content, Default: `""`
   @param {string} [cy=""] - data-cy attribute for cypress, Default: `""`
   @param {string} [class=""] - CSS class for modal container, Default: `""`
+  @method `close()` - Call this method to close modal programmatically
+  @method `open()` - Call this method to open modal programmatically
 
   ### Slots
   - `<slot name="default"  />` - Used for the Modal content
@@ -114,11 +116,17 @@ Only programmatic closing is possible, Default: `true`
     }
   }
 
-  function close() {
+  /**
+   * Call this method to close modal programmatically
+   */
+  export function close() {
     is_active = false;
   }
 
-  function open() {
+  /**
+   * Call this method to open modal programmatically
+   */
+  export function open() {
     is_active = true;
   }
 </script>

package/helpers/Nl2br.svelte

@@ -7,7 +7,7 @@
 -->
 {#if text && text_parts}
   {#each text_parts as part, index}
-    {part}{#if text_parts.length != index + 1}<br />{/if}
+    {part}{#if text_parts.length !== index + 1}<br />{/if}
   {/each}
 {/if}
 

package/helpers/Notification.svelte

@@ -23,7 +23,7 @@ The parent can then decide what to do with the component
     class="notification is-{color} {light ? 'is-light' : ''} {klass}"
     {style}>
     {#if dismissable}
-      <button class="delete" on:click={dismiss} />
+      <button type="button" class="delete" on:click={dismiss} />
     {/if}
     <!--Used for notification content--><slot />
   </div>

package/helpers/Panel.svelte

@@ -43,11 +43,12 @@ This will not work if there is no title area
   class="panel {klass}"
   {style}
   data-cy={cy}>
-  {#if title != "" || has_title}
+  {#if title !== "" || has_title}
     <div class="panel-heading" on:click={toggle}>
       <div class="level is-mobile">
         <div class="level-left">
           <div class="level-item">
+            <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
             <h2 class="subtitle">{@html title}</h2>
           </div>
         </div>
@@ -73,6 +74,7 @@ This will not work if there is no title area
             </div>
           {/if}
           <div class="level-item">
+            <!-- eslint-disable-next-line @ota-meshi/svelte/no-at-html-tags -->
             <h2 class="subtitle is-6">{@html subtitle}</h2>
           </div>
           <span class="collapsor level-item">

package/helpers/Skeleton.svelte

@@ -11,10 +11,11 @@
 **Examples:** `10px` | `5rem`, Default: `"0px"`
   @param {boolean} [circle=false] - Whether the Skeleton should be rendered as a circle.
 If this is set to `true`, the `radius` property will be ignored., Default: `false`
-  @param {'transparent' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link'} [color=""] - Color of the Skeleton lines, Default: `""`
+  @param {'' | 'transparent' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link'} [color=""] - Color of the Skeleton lines, Default: `""`
   @param {string} [class=""] - CSS class for Skeleton, Default: `""`
 
 -->
+<!-- eslint-disable-next-line no-unused-vars -->
 {#each { length: lines } as _, i}
   <span
     class="kws-skeleton is-{color} {klass}"
@@ -50,7 +51,7 @@ If this is set to `true`, the `radius` property will be ignored., Default: `fals
     circle = false,
     /**
      * Color of the Skeleton lines
-     * @type {'transparent' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link'}
+     * @type {'' | 'transparent' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link'}
      */
     color = "";
 

package/index.js

@@ -11,6 +11,7 @@ export { default as Notification } from "./helpers/Notification.svelte";
 export { default as Loader } from "./helpers/Loader.svelte";
 export { default as ActionSheet } from "./helpers/ActionSheet.svelte";
 export { default as Skeleton } from "./helpers/Skeleton.svelte";
+export { default as Divider } from "./helpers/Divider.svelte";
 export { default as Timeline } from "./helpers/Timeline/Timeline.svelte";
 export { default as TimelineItem } from "./helpers/Timeline/TimelineItem.svelte";
 export { default as TimelineHeader } from "./helpers/Timeline/TimelineHeader.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.7.0",
+  "version": "1.7.3",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -29,5 +29,5 @@
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "2da51d63a233a8129e31898f0a134f3a68d7f1ec"
+  "gitHead": "f76e8d0f5bb9859092c7e4e6b38f8fbd3252dc5d"
 }