@kws3/ui 1.6.8 → 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/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,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.8",
+  "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": "f35ff4c73bff73bddc8c3af2dd88d5f4282ae6df"
+  "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/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;
+    }
+  }
+}