@kws3/ui 1.6.7 → 1.7.1

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/Popover.svelte

@@ -23,11 +23,11 @@ When set to `null`, it will use the content of the `popover` slot, Default: `nul
 It can be any CSS value associated with `max-width` property, including `"none"`, Default: `"none"`
   @param {string} [style=""] - Inline CSS for Popover trigger, Default: `""`
   @param {string} [class=""] - CSS classes for Popover trigger, Default: `""`
-  @param {function} [open()] - Open function
-  @param {function} [close()] - Close function
-  @param {function} [enable()] - Enable function
-  @param {function} [disable()] - Disable function
-  @param {function} [setProps(props)] - SetProps function
+  @method `open()` - Open method
+  @method `close()` - Close method
+  @method `enable()` - Enable method
+  @method `disable()` - Disable method
+  @method `setProps(props)` - SetProps method
 
   ### Events
   - `opening` - Triggered when popover is opening

package/helpers/Skeleton.svelte

@@ -0,0 +1,66 @@
+<!--
+  @component
+
+
+  @param {number} [lines=1] - Lines property, Default: `1`
+  @param {string} [width="100%"] - CSS string denoting width of the Skeleton
+**Examples:** `10px` | `5rem` | `100vh`, Default: `"100%"`
+  @param {string} [height="auto"] - CSS string denoting height of the Skeleton
+**Examples:** `10px` | `5rem` | `100vh` | `auto`, Default: `"auto"`
+  @param {string} [radius="0px"] - CSS string denoting border-radius of the Skeleton
+**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 {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}"
+    style="width:{width};height:{height};border-radius:{border_radius}">
+    &zwnj;
+  </span>
+{/each}
+
+<script>
+  export let /**
+     * Number of lines of text to display.
+     */
+    lines = 1,
+    /**
+     * CSS string denoting width of the Skeleton
+     * **Examples:** `10px` | `5rem` | `100vh`
+     */
+    width = "100%",
+    /**
+     * CSS string denoting height of the Skeleton
+     * **Examples:** `10px` | `5rem` | `100vh` | `auto`
+     */
+    height = "auto",
+    /**
+     * CSS string denoting border-radius of the Skeleton
+     * **Examples:** `10px` | `5rem`
+     */
+    radius = "0px",
+    /**
+     * Whether the Skeleton should be rendered as a circle.
+     * If this is set to `true`, the `radius` property will be ignored.
+     */
+    circle = false,
+    /**
+     * Color of the Skeleton lines
+     * @type {'' | 'transparent' | 'warning' | 'info' | 'danger' | 'primary' | 'success' | 'link'}
+     */
+    color = "";
+
+  /**
+   * CSS class for Skeleton
+   * @type {string}
+   */
+  let klass = "";
+  export { klass as class };
+
+  $: border_radius = circle ? "50%" : radius;
+</script>

package/helpers/Timeline/Timeline.svelte

@@ -0,0 +1,28 @@
+<!--
+  @component
+
+
+  @param {'left'|'center'|'right'} [align="left"] - Alignment of the Timeline child items, Default: `"left"`
+  @param {string} [class=""] - CSS classes for the Timeline container, Default: `""`
+
+  ### Slots
+  - `<slot name="default"  />` - Default slot for placing all TimelineItem and TimelineHeader components
+
+-->
+<ul class="kws-timeline is-{align} {klass}">
+  <!--Default slot for placing all TimelineItem and TimelineHeader components--><slot />
+</ul>
+
+<script>
+  /**
+   * Alignment of the Timeline child items
+   * @type {'left'|'center'|'right'}
+   */
+  export let align = "left";
+
+  /**
+   * CSS classes for the Timeline container
+   */
+  let klass = "";
+  export { klass as class };
+</script>

package/helpers/Timeline/TimelineHeader.svelte

@@ -0,0 +1,21 @@
+<!--
+  @component
+
+
+  @param {string} [class=""] - CSS classes for the TimelineItem container, Default: `""`
+
+  ### Slots
+  - `<slot name="default"  />` - Content of the header, recommended to wrap with a `.tag` element.
+
+-->
+<header class="kws-timeline-header {klass}">
+  <!--Content of the header, recommended to wrap with a `.tag` element.--><slot />
+</header>
+
+<script>
+  /**
+   * CSS classes for the TimelineItem container
+   */
+  let klass = "";
+  export { klass as class };
+</script>

package/helpers/Timeline/TimelineItem.svelte

@@ -0,0 +1,70 @@
+<!--
+  @component
+
+
+  @param {''|'dark' | 'light' | 'warning' | 'info' | 'danger' | 'primary' | 'success'} [color="primary"] - Color of marker and border, Default: `"primary"`
+  @param {string} [marker_icon="null"] - Any icon name accepted by the Icon component, icon will be placed inside the marker, Default: `"null"`
+  @param {string} [marker_image="null"] - Any image URL, the image will be placed inside the marker, Default: `"null"`
+  @param {string} [class=""] - CSS classes for the TimelineItem container, Default: `""`
+
+  ### Slots
+  - `<slot name="above"  />` - Optional text to be displayed above the main text
+  - `<slot name="default"  />` - Default slot containing the main text
+  - `<slot name="below"  />` - Optional text to be displayed below the main text
+  - `<slot name="thumbnail"  />` - Optional thumbnail image do be displayed next to the main content
+
+-->
+<li class="kws-timeline-item is-{color} {klass}">
+  <div class="kws-timeline-marker">
+    {#if marker_icon && !marker_image}
+      <Icon icon={marker_icon} />
+    {/if}{#if marker_image && !marker_icon}
+      <figure class="image is-32x32"><img src={marker_image} alt="" /></figure>
+    {/if}
+  </div>
+  <div class="kws-timeline-content">
+    <span class="is-block has-text-grey"
+      ><!--Optional text to be displayed above the main text--><slot
+        name="above" /></span>
+    <span class="is-block description">
+      <!--Default slot containing the main text--><slot />
+    </span>
+
+    <span class="is-block has-text-grey">
+      <!--Optional text to be displayed below the main text--><slot
+        name="below" />
+    </span>
+  </div>
+  {#if $$slots.thumbnail}
+    <div class="kws-timeline-image">
+      <!--Optional thumbnail image do be displayed next to the main content--><slot
+        name="thumbnail" />
+    </div>
+  {/if}
+</li>
+
+<script>
+  import { Icon } from "@kws3/ui";
+
+  /**
+   * Color of marker and border
+   * @type {''|'dark' | 'light' | 'warning' | 'info' | 'danger' | 'primary' | 'success'}
+   */
+  export let color = "primary";
+  /**
+   * Any icon name accepted by the Icon component, icon will be placed inside the marker
+   * @type {string}
+   */
+  export let marker_icon = null;
+  /**
+   * Any image URL, the image will be placed inside the marker
+   * @type {string}
+   */
+  export let marker_image = null;
+
+  /**
+   * CSS classes for the TimelineItem container
+   */
+  let klass = "";
+  export { klass as class };
+</script>

package/index.js

@@ -10,6 +10,11 @@ export { default as Panel } from "./helpers/Panel.svelte";
 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";
 export { default as Nl2br } from "./helpers/Nl2br.svelte";
 export { default as ClipboardCopier } from "./helpers/ClipboardCopier.svelte";
 export { alert, confirm, prompt, default as Dialog } from "./helpers/Dialog";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.6.7",
+  "version": "1.7.1",
   "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": "12e85eba3be37c2d133c8ac047e4dbf651378c18"
+  "gitHead": "f9be2abdbb4f340ade0d47be929aac91381a5e4b"
 }

package/sliding-panes/SlidingPane.svelte

@@ -2,7 +2,7 @@
   @component
 
 
-  @param {boolean} [active=false] - Used to set the active pane., Default: `false`
+  @param {boolean} [active=false] - Used to set the active pane, Default: `false`
   @param {string} [style=""] - Inline CSS of component, Default: `""`
   @param {boolean} [v_center=true] - Vertical alignment of content inside the active pane., Default: `true`
   @param {boolean} [h_center=true] - Horizontal alignment of content inside the active pane., Default: `true`
@@ -40,7 +40,7 @@ This will work only when `track_height` is set to `true`
   const fire = createEventDispatcher();
 
   /**
-   * Used to set the active pane.
+   * Used to set the active pane
    */
   export let active = false,
     /**

package/sliding-panes/SlidingPaneSet.svelte

@@ -2,34 +2,31 @@
   @component
 
 
-  @param {string} [classes=""] - Additional classes, Default: `""`
   @param {string} [style=""] - Inline style of component, Default: `""`
-  @param {boolean} [vertical=false] - Vertical Aligned - true/false, Default: `false`
+  @param {boolean} [vertical=false] - Vertical transform of SlidingPane., Default: `false`
+  @param {string} [class=""] - CSS classes for the SlidingPaneSet, Default: `""`
 
   ### Slots
   - `<slot name="default"  />`
 
 -->
-<div
-  class="sliding-pane-set {vertical ? 'is-vertical' : ''}  {classes}"
-  {style}>
+<div class="sliding-pane-set {vertical ? 'is-vertical' : ''}  {klass}" {style}>
   <slot />
 </div>
 
 <script>
   /**
-   * Additional classes
-   * @type {string}
+   * Inline style of component
    */
-  export let classes = "",
+  export let style = "",
     /**
-     * Inline style of component
-     * @type {string}
-     */
-    style = "",
-    /**
-     * Vertical Aligned - true/false
-     * @type {boolean}
+     * Vertical transform of SlidingPane.
      */
     vertical = false;
+
+  /**
+   * CSS classes for the SlidingPaneSet
+   */
+  let klass = "";
+  export { klass as class };
 </script>

package/styles/DataSort.scss

@@ -9,6 +9,8 @@
     &:first-child {
       padding-left: calc(0.625rem - 1px);
       border-radius: 0 0 0 $radius-large;
+      background: darken($input-border-color, 5%);
+      padding-right: calc(0.625rem - 1px);
     }
     &:last-child {
       border-radius: 0 0 $radius-large 0;
@@ -29,6 +31,9 @@
         border: none;
         box-shadow: none;
       }
+      &.is-fullwidth {
+        width: 100%;
+      }
     }
     &::after {
       border-color: $primary;

package/styles/Divider.scss

@@ -0,0 +1,102 @@
+$kws-theme-colors: $colors !default;
+$kws-divider-color: $border !default;
+$kws-divider-font-size: $size-7 !default;
+$kws-divider-gap: 0.25rem !default;
+$kws-divider-margin: 1rem !default;
+
+.kws-divider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  text-transform: uppercase;
+  color: $grey;
+  font-size: $kws-divider-font-size;
+  font-weight: $weight-semibold;
+  letter-spacing: 0.5px;
+  margin: $kws-divider-margin 0;
+  width: 100%;
+
+  &::after,
+  &::before {
+    content: "";
+    display: block;
+    flex: 1;
+    height: 1px;
+    background-color: $kws-divider-color;
+  }
+
+  &:not(.is-right),
+  &:not(.is-bottom) {
+    &::after {
+      margin-left: $kws-divider-gap;
+    }
+  }
+
+  &:not(.is-left),
+  &:not(.is-top) {
+    &::before {
+      margin-right: $kws-divider-gap;
+    }
+  }
+
+  &.is-left,
+  &.is-top {
+    &::before {
+      display: none;
+    }
+  }
+
+  &.is-right,
+  &.is-bottom {
+    &::after {
+      display: none;
+    }
+  }
+
+  &.is-vertical {
+    flex-direction: column;
+    margin: 0 $kws-divider-margin;
+    height: 100%;
+    width: auto;
+
+    &::after,
+    &::before {
+      height: auto;
+      width: 1px;
+    }
+
+    &::after {
+      margin-left: 0;
+      margin-top: $kws-divider-gap;
+    }
+
+    &::before {
+      margin-right: 0;
+      margin-bottom: $kws-divider-gap;
+    }
+  }
+
+  &:empty {
+    &::after,
+    &::before {
+      margin: 0;
+    }
+  }
+
+  @each $name, $pair in $kws-theme-colors {
+    $color: nth($pair, 1);
+    $color-light: findLightColor($color);
+    &.is-#{$name} {
+      &::after,
+      &::before {
+        background-color: $color;
+      }
+      &.is-light {
+        &::after,
+        &::before {
+          background-color: $color-light;
+        }
+      }
+    }
+  }
+}

package/styles/Grid.scss

@@ -36,6 +36,7 @@ $kws-gridview-checked-row-background: $primary-light !default;
   }
   td.is-icon {
     width: 25px;
+    vertical-align: middle;
     .icon {
       font-size: $kws-gridview-icon-size;
     }