@kws3/ui 1.6.5 → 1.6.9

package/CHANGELOG.mdx

@@ -0,0 +1,85 @@
+
+## 1.6.9
+- New `Timeline`, `TimelineItem` and `TimelineHeader` components.
+
+## 1.6.8
+- Vertically align `is-icon` cells in `Grid`
+
+## 1.6.7
+- Added granular events `showing`, `shown`, `hiding` and `hidden` for `Popover`.
+- Added `is-checked` class on `Grid` when a row is checked using the multiselect checkboxes.
+- New colors for `is-checked` class on `Grid`
+
+## 1.6.6
+- Enhance `Popover` with native `show` `hide` `enable` `disable` methods
+
+## 1.6.5
+- Filter fix on `DataSearch`
+
+## 1.6.4
+- Add support for `dropdown_portal` prop in `SearchableSelect`
+
+## 1.6.3
+- Prevent submit call on `MultiSelect` when `Enter` key is pressed while searching
+- Fix filter items going blank after search is initiated in `DataSearch`
+
+## 1.6.2
+- Add `dropdown_portal` prop on `MultiSelect` to allow rendering dropdown in alternative locations
+
+## 1.6.1
+- New `Portal` component
+- Use `Portal` for `MultiSelect` and `SearchableSelect` components
+
+## 1.6.0
+- Fix `DataSearch` responsiveness for mobile
+- Fix `Pagination` CSS for mobile
+- Fix `DataSort`  responsiveness for mobile
+- Fix functionality of `DataSearch`
+
+## 1.5.9
+- Fix `z-index` issue with `SearchableSelect`
+
+## 1.5.8
+- Showing `undefined` on total in `Pagination`
+
+## 1.5.7
+- Width calculation on `DataSearch`
+- More `text` validation `Nl2br`
+
+## 1.5.6
+- Fix attribute of `MultiSelect`
+- Fix `text` checking on `Nl2br`
+
+## 1.5.5
+- Added `BarChart`
+- Added `LineChart`
+- Added `AreaChart`
+- Added `RadialChart`
+- Support `sparklines` in `Charts`
+- Add `yAxisOptions` and `horizontal` bar for `Charts`
+- Fix attribute of `ConfirmButton`
+- Fix error Handling in `MixedChart`
+
+## 1.5.1
+- Chart bugfixes
+- Fix attribute of `NumberInput` for UI testing
+
+## 1.5.0
+- Added `DonutChart`
+- Added `MixedChart`
+- Added `PieChart`
+
+## 1.4.7
+- Fix value mismatch on `NumberInput`
+
+## 1.4.6
+- Fix Typing bug on `NumberInput`
+
+## 1.4.5
+- Fix **on:change** event on `NumberInput`
+
+## 1.4.4
+- import  `Floatie`, `FloatingUIOutput`, `FloatiesStore` from `@kws3/ui` for `FloatingUIOutput`
+
+## 1.4.3
+- Rename `completion_timeout` to `error_timeout` in `Buttons`

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 KWS3 Media Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,3 @@
 UI components for use with Svelte v3 applications.
 
-Docs: [https://ui.kws3.media](https://ui.kws3.media)
+[Demo and Documentation](https://ui.kws3.media)

package/datagrid/GridView/GridRow.svelte

@@ -29,7 +29,8 @@
   <tr
     in:fly={{ x: 20, delay: 25 * row_index }}
     on:click|stopPropagation={rowClick}
-    class:is-selected={rowActive}>
+    class:is-selected={rowActive}
+    class:is-checked={checked}>
     {#if bulk_actions}
       <td style="vertical-align:middle;">
         <Checkbox
@@ -55,7 +56,10 @@
     {/each}
   </tr>
 {:else}
-  <tr on:click|stopPropagation={rowClick} class:is-selected={rowActive}>
+  <tr
+    on:click|stopPropagation={rowClick}
+    class:is-selected={rowActive}
+    class:is-checked={checked}>
     {#if bulk_actions}
       <td style="vertical-align:middle;">
         <Checkbox

package/helpers/Popover.svelte

@@ -7,11 +7,14 @@
   @param {''|'small'|'medium'|'large'} [icon_size="small"] - Size of the trigger icon displayed when default slot has no content, Default: `"small"`
   @param {string} [trigger="click"] - Determines the events that cause the Popover to show. Multiple event names are separated by spaces.
 
-**Examples:** `click`, `mouseenter`, `mouseenter focus`, Default: `"click"`
+**Examples:** `click`, `mouseenter`, `mouseenter focus`
+
+If you would like to trigger the popover programatically only, you can use `manual`., Default: `"click"`
   @param {string} [placement="auto"] - Preferred placement of the Popover
 
 Available options: <a target="_blank" href="https://atomiks.github.io/tippyjs/v6/all-props/#placement">https://atomiks.github.io/tippyjs/v6/all-props/#placement</a>, Default: `"auto"`
   @param {boolean} [interactive=false] - Allows you to interact with the Popover content, when turned on, Default: `false`
+  @param {boolean} [hide_on_click=true] - Whether the popover should hide on clicking outside of it, Default: `true`
   @param {object} [external_target=null] - Specify a target node reference to use as the Popover content
 
 When set to `null`, it will use the content of the `popover` slot, Default: `null`
@@ -20,6 +23,18 @@ 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
+
+  ### Events
+  - `opening` - Triggered when popover is opening
+  - `open` - Triggered when popover is opened
+  - `closing` - Triggered when popover is closing
+  - `close` - Triggered when popover is closed
+  - `trigger` - Triggered when popover is triggered either programatically or by user interaction
 
   ### Slots
   - `<slot name="default"  />` - Content of the Popover Trigger, by default it displays an Icon
@@ -28,11 +43,18 @@ It can be any CSS value associated with `max-width` property, including `"none"`
 -->
 <span
   use:popover={{ content: targetNode }}
+  bind:this={popoverParent}
+  on:showing={popoverShowing}
+  on:shown={popoverShown}
+  on:hiding={popoverHiding}
+  on:hidden={popoverHidden}
+  on:triggered={popoverTriggered}
   data-tippy-trigger={trigger}
   data-tippy-placement={placement}
   data-tippy-offset="[0, 10]"
   data-tippy-interactive={interactive ? "true" : "false"}
   data-tippy-maxWidth={max_width}
+  data-tippy-hideOnClick={hide_on_click ? "true" : "false"}
   style={_style}
   class={klass}>
   <!--Content of the Popover Trigger, by default it displays an Icon--><slot
@@ -51,8 +73,12 @@ It can be any CSS value associated with `max-width` property, including `"none"`
 </style>
 
 <script>
+  import { createEventDispatcher } from "svelte";
   import { popover } from "./Tooltip";
   import { Icon } from "@kws3/ui";
+
+  const fire = createEventDispatcher();
+
   /**
    * Icon used when default slot has no content
    */
@@ -71,6 +97,8 @@ It can be any CSS value associated with `max-width` property, including `"none"`
    * Determines the events that cause the Popover to show. Multiple event names are separated by spaces.
    *
    * **Examples:** `click`, `mouseenter`, `mouseenter focus`
+   *
+   * If you would like to trigger the popover programatically only, you can use `manual`.
    */
   export let trigger = "click";
   /**
@@ -83,6 +111,10 @@ It can be any CSS value associated with `max-width` property, including `"none"`
    * Allows you to interact with the Popover content, when turned on
    */
   export let interactive = false;
+  /**
+   * Whether the popover should hide on clicking outside of it
+   */
+  export let hide_on_click = true;
   /**
    * Specify a target node reference to use as the Popover content
    *
@@ -106,7 +138,66 @@ It can be any CSS value associated with `max-width` property, including `"none"`
   let klass = "";
   export { klass as class };
 
-  let popoverNode;
+  let popoverNode, popoverParent;
+
+  const getInstance = () => {
+    return popoverParent._tippy;
+  };
+
+  export function open() {
+    getInstance().show();
+  }
+
+  export function close() {
+    getInstance().hide();
+  }
+
+  export function enable() {
+    getInstance().enable();
+  }
+
+  export function disable() {
+    getInstance().disable();
+  }
+
+  export function setProps(props) {
+    getInstance().setProps(props);
+  }
+
+  const popoverShowing = ({ detail }) => {
+    /**
+     * Triggered when popover is opening
+     */
+    fire("opening", detail);
+  };
+
+  const popoverShown = ({ detail }) => {
+    /**
+     * Triggered when popover is opened
+     */
+    fire("open", detail);
+  };
+
+  const popoverHiding = ({ detail }) => {
+    /**
+     * Triggered when popover is closing
+     */
+    fire("closing", detail);
+  };
+
+  const popoverHidden = ({ detail }) => {
+    /**
+     * Triggered when popover is closed
+     */
+    fire("close", detail);
+  };
+
+  const popoverTriggered = ({ detail }) => {
+    /**
+     * Triggered when popover is triggered either programatically or by user interaction
+     */
+    fire("trigger", detail);
+  };
 
   $: _style = `cursor:pointer;${style}`;
   $: targetNode = external_target ? external_target : popoverNode;

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/helpers/Tooltip.js

@@ -29,7 +29,23 @@ function createTippyAction(defaultOpts) {
     let instance;
 
     function makeOptions() {
-      return Object.assign({}, defaultOpts, opts);
+      return Object.assign({}, defaultOpts, opts, {
+        onShow(instance) {
+          dispatch("showing", { instance });
+        },
+        onShown(instance) {
+          dispatch("shown", { instance });
+        },
+        onHide(instance) {
+          dispatch("hiding", { instance });
+        },
+        onHidden(instance) {
+          dispatch("hidden", { instance });
+        },
+        onTrigger(instance) {
+          dispatch("triggered", { instance });
+        },
+      });
     }
 
     function remakeInstance() {
@@ -51,6 +67,11 @@ function createTippyAction(defaultOpts) {
 
     makeInstance();
 
+    function dispatch(type, detail) {
+      const e = new CustomEvent(type, { bubbles: false, detail });
+      node.dispatchEvent(e);
+    }
+
     return {
       update(_opts) {
         opts = _opts;

package/index.js

@@ -10,6 +10,9 @@ 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 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.5",
+  "version": "1.6.9",
   "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": "7bd56973e65c032a94e8285e321de06d0a89d051"
+  "gitHead": "85f8066201dc00eef8977c9a41239b377a5ca878"
 }

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

@@ -10,26 +10,23 @@
   - `<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/Grid.scss

@@ -4,12 +4,14 @@ $kws-gridview-th-background: $table-background-color !default;
 $kws-gridview-th-color: $text !default;
 $kws-gridview-tag-margin: 0 0.125rem 0.125rem 0 !default;
 $kws-gridview-icon-size: 1.5em !default;
+$kws-gridview-checked-row-background: $primary-light !default;
 
 .data-table .table {
   box-shadow: $kws-gridview-box-shadow;
   th {
     background: $kws-gridview-th-background;
     color: $kws-gridview-th-color;
+    vertical-align: middle;
   }
   &.is-bordered {
     tr {
@@ -34,6 +36,7 @@ $kws-gridview-icon-size: 1.5em !default;
   }
   td.is-icon {
     width: 25px;
+    vertical-align: middle;
     .icon {
       font-size: $kws-gridview-icon-size;
     }
@@ -43,4 +46,11 @@ $kws-gridview-icon-size: 1.5em !default;
       cursor: pointer;
     }
   }
+
+  tr.is-checked {
+    background-color: $kws-gridview-checked-row-background !important;
+    td {
+      background-color: $kws-gridview-checked-row-background !important;
+    }
+  }
 }

package/styles/Pagination.scss

@@ -14,7 +14,7 @@ $kws-pagination-item-active-color: findColorInvert(
 
 $kws-pagination-frame-box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1),
   0 0 0 0.0625rem rgba(0, 0, 0, 0.1) !default;
-$kws-pagination-frame-background: linear-gradient(#fff, #fafafa);
+$kws-pagination-frame-background: linear-gradient(#fff, #fafafa) !default;
 
 .pagination {
   &.is-small {

package/styles/Timeline.scss

@@ -0,0 +1,164 @@
+$kws-timeline-default-color: $grey !default;
+$kws-timeline-default-color-invert: $light !default;
+
+@mixin right-aligned-timeline-item {
+  flex-direction: row-reverse;
+  .kws-timeline-marker {
+    right: 0;
+    left: auto;
+    transform: translateX(50%);
+  }
+  .kws-timeline-content {
+    text-align: right;
+    padding-left: 0;
+    padding-right: 1.75rem;
+  }
+  &:before {
+    right: -0.5px;
+    left: auto;
+  }
+}
+
+.kws-timeline-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding: 0.5rem 0;
+  &:first-child {
+    padding-top: 0;
+  }
+  &:last-child {
+    padding-bottom: 0;
+  }
+  .kws-timeline-marker {
+    position: absolute;
+    left: 0;
+    background: $kws-timeline-default-color;
+    border: 1px solid $kws-timeline-default-color;
+    border-radius: 100%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem;
+    overflow: hidden;
+    &:empty {
+      min-height: 1rem;
+      min-width: 1rem;
+      padding: 0;
+      border-width: 4px;
+      background: $kws-timeline-default-color-invert;
+    }
+    .icon {
+      color: $kws-timeline-default-color-invert;
+      width: 16px;
+      height: 16px;
+      font-size: 0.75rem !important;
+    }
+    .image {
+      margin: -0.25rem;
+      img {
+        border-radius: 100%;
+      }
+    }
+  }
+  .kws-timeline-content {
+    padding-left: 1.75rem;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+  .kws-timeline-image {
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: 32px;
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      border-radius: $radius;
+      box-shadow: 0 0.125rem 0.1875rem rgba(10, 10, 10, 0.1),
+        0 0 0 0.0625rem rgba(10, 10, 10, 0.1);
+    }
+  }
+
+  &:before {
+    content: "";
+    background-color: $kws-timeline-default-color;
+    display: block;
+    width: 1px;
+    height: 100%;
+    position: absolute;
+    left: -0.5px;
+    top: 0;
+  }
+
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+    &.is-#{$name} {
+      .kws-timeline-marker {
+        border-color: $color;
+        background-color: $color;
+        &:empty {
+          background-color: $color-invert;
+        }
+        .icon {
+          color: $color-invert;
+        }
+      }
+      &:before {
+        background-color: $color;
+      }
+    }
+  }
+}
+
+.kws-timeline-header {
+  width: 4em;
+  min-width: 4em;
+  word-wrap: normal;
+  text-align: center;
+  transform: translateX(-25px);
+  + .kws-timeline-header {
+    padding-top: 0.5rem;
+  }
+}
+
+.kws-timeline {
+  list-style: none;
+  margin: 0;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+
+  &.is-center {
+    .kws-timeline-item {
+      width: 50%;
+      align-self: flex-end;
+      flex-direction: row;
+      &:nth-of-type(2n) {
+        align-self: flex-start;
+        @include right-aligned-timeline-item;
+      }
+    }
+    .kws-timeline-header {
+      width: 100%;
+      transform: none;
+    }
+  }
+
+  &.is-right {
+    justify-content: flex-end;
+    align-items: flex-end;
+    .kws-timeline-item {
+      width: 100%;
+      align-self: flex-end;
+      @include right-aligned-timeline-item;
+    }
+    .kws-timeline-header {
+      transform: translateX(25px);
+      width: 100%;
+      text-align: right;
+    }
+  }
+}