@kws3/ui 1.6.9 → 1.7.0

package/CHANGELOG.mdx

@@ -1,3 +1,8 @@
+## 1.7.0
+- Ensure uniform usage of $kws-theme-colors across all components, this means $kws-theme-colors can be indepnedent of the global $colors SCSS variable.
+- `DataSearch` component: Expand filters to fill area when main search input is not present.
+- `DataSort` component: Increase click area for activating dropdown, and provide visual segementation between label and dropdown.
+- New `Skeleton` component.
 
 ## 1.6.9
 - New `Timeline`, `TimelineItem` and `TimelineHeader` components.

package/buttons/SubmitButton.svelte

@@ -15,9 +15,9 @@
   @param {number} [completion_timeout=600] - How long to wait before `saved` event is fired, and the UI state reverts back to normal, Default: `600`
   @param {number} [error_timeout=3000] - How long to wait before `error` event is fired, and the UI state reverts back to normal, Default: `3000`
   @param {string} [class=""] - CSS classes for Button container, Default: `""`
-  @param {function} [saving()] - call this function on form saving state
-  @param {function} [saved(callback, timeout)] - call this function after form saved
-  @param {function} [error(callback, timeout)] - call this function on form error state
+  @method `saving()` - call this method on form saving state
+  @method `saved(callback, timeout)` - call this method after form saved
+  @method `error(callback, timeout)` - call this method on form error state
 
   ### Events
   - `saved` - Fired on successful submission
@@ -115,7 +115,7 @@
   export { klass as class };
 
   /**
-   * call this function on form saving state
+   * call this method on form saving state
    */
   export function saving() {
     tracker = {
@@ -126,7 +126,7 @@
   }
 
   /**
-   * call this function after form saved
+   * call this method after form saved
    */
   export function saved(callback, timeout = completion_timeout) {
     tracker = {
@@ -150,7 +150,7 @@
   }
 
   /**
-   * call this function on form error state
+   * call this method on form error state
    */
   export function error(callback, timeout = error_timeout) {
     tracker = {

package/datagrid/DataSearch/SearchFilter.svelte

@@ -11,7 +11,10 @@
 -->
 
 {#if filter.type == "multiselect"}
-  <div class="control search-control" style={filterWidthStyle}>
+  <div
+    class="control search-control"
+    class:is-expanded={shouldExpandToFill}
+    style={filterWidthStyle}>
     <MultiSelect
       options={sanitizedOptions}
       placeholder={`Any ${name}`}
@@ -23,14 +26,20 @@
       class={hilightClass} />
   </div>
 {:else if filter.type == "date"}
-  <div class="control search-control" style={filterWidthStyle}>
+  <div
+    class="control search-control"
+    class:is-expanded={shouldExpandToFill}
+    style={filterWidthStyle}>
     <Datepicker
       class={hilightClass}
       bind:value={filterVals[filter.name]}
       placeholder="{capitaliseFirstLetter(name)} Date" />
   </div>
 {:else if filter.type == "daterange"}
-  <div class="control search-control" style={filterWidthStyle}>
+  <div
+    class="control search-control"
+    class:is-expanded={shouldExpandToFill}
+    style={filterWidthStyle}>
     <Datepicker
       class={hilightClass}
       bind:value={filterVals[filter.name]}
@@ -38,7 +47,10 @@
       placeholder="{capitaliseFirstLetter(name)} Date Range" />
   </div>
 {:else if filter.options.length > 10}
-  <div class="control search-control" style={filterWidthStyle}>
+  <div
+    class="control search-control"
+    class:is-expanded={shouldExpandToFill}
+    style={filterWidthStyle}>
     <SearchableSelect
       options={sanitizedOptions}
       placeholder={`Any ${name}`}
@@ -50,12 +62,13 @@
 {:else}
   <div
     class="select control search-control {hilightClass}"
+    class:is-expanded={shouldExpandToFill}
     style={filterWidthStyle}
     data-cy="select-container">
     <select
       bind:value={filterVals[filter.name]}
       class="is-radiusless {hilightClass}"
-      style="max-width:100%"
+      style="max-width:100%;width:100%;"
       data-cy={cy}>
       {#each sanitizedOptions as option}
         {#if option}
@@ -103,6 +116,8 @@
 
   $: filterVals, filter, convertToValuesArray();
 
+  $: shouldExpandToFill = !filterWidthStyle || filterWidthStyle.trim() == "";
+
   function convertValuesToString() {
     tick().then(() => {
       filterVals[filter.name] = multiSelectValue

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,65 @@
+<!--
+  @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: `""`
+
+-->
+{#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/index.js

@@ -10,6 +10,7 @@ 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 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.6.9",
+  "version": "1.7.0",
   "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": "85f8066201dc00eef8977c9a41239b377a5ca878"
+  "gitHead": "2da51d63a233a8129e31898f0a134f3a68d7f1ec"
 }

package/sliding-panes/SlidingPaneSet.svelte

@@ -2,9 +2,9 @@
   @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"  />`

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/Loader.scss

@@ -1,3 +1,4 @@
+$kws-theme-colors: $colors !default;
 $kws-loader-width: 2rem !default;
 $kws-loader-height: 2rem !default;
 $kws-loader-width-medium: ($kws-loader-width * 1.5) !default;
@@ -5,45 +6,45 @@ $kws-loader-height-medium: ($kws-loader-height * 1.5) !default;
 $kws-loader-width-large: ($kws-loader-width * 3) !default;
 $kws-loader-height-large: ($kws-loader-height * 3) !default;
 $kws-loader-color: #ccc !default;
-$kws-loader-overlay-background: rgba(0,0,0,0.15) !default;
+$kws-loader-overlay-background: rgba(0, 0, 0, 0.15) !default;
 
-.kws-loader{
-  .hero-body{
-    position:relative;
-    &:after{
+.kws-loader {
+  .hero-body {
+    position: relative;
+    &:after {
       @include loader();
-      border-left-color:$kws-loader-color;
-      border-bottom-color:$kws-loader-color;
+      border-left-color: $kws-loader-color;
+      border-bottom-color: $kws-loader-color;
       position: absolute !important;
-      width:$kws-loader-width;
-      height:$kws-loader-height;
+      width: $kws-loader-width;
+      height: $kws-loader-height;
       left: calc(50% - (#{$kws-loader-width} / 2));
       top: calc(50% - (#{$kws-loader-height} / 2));
     }
 
-    @each $name, $pair in $colors{
+    @each $name, $pair in $kws-theme-colors {
       $color: nth($pair, 1);
-      &.is-#{$name}{
-        &:after{
-          border-left-color:$color !important;
-          border-bottom-color:$color !important;
+      &.is-#{$name} {
+        &:after {
+          border-left-color: $color !important;
+          border-bottom-color: $color !important;
         }
       }
     }
 
-    &.is-medium{
-      &:after{
-        width:$kws-loader-width-medium;
-        height:$kws-loader-height-medium;
+    &.is-medium {
+      &:after {
+        width: $kws-loader-width-medium;
+        height: $kws-loader-height-medium;
         left: calc(50% - (#{$kws-loader-width-medium} / 2));
         top: calc(50% - (#{$kws-loader-height-medium} / 2));
       }
     }
 
-    &.is-large{
-      &:after{
-        width:$kws-loader-width-large;
-        height:$kws-loader-height-large;
+    &.is-large {
+      &:after {
+        width: $kws-loader-width-large;
+        height: $kws-loader-height-large;
         left: calc(50% - (#{$kws-loader-width-large} / 2));
         top: calc(50% - (#{$kws-loader-height-large} / 2));
       }
@@ -51,17 +52,17 @@ $kws-loader-overlay-background: rgba(0,0,0,0.15) !default;
   }
 }
 
-.is-overlay{
-  z-index:4;
-  .kws-loader{
-    padding:0;
-    height:100%;
-    width:100%;
-    position:relative;
-    background:$kws-loader-overlay-background;
-    z-index:3;
-    .hero-body{
-      padding:0;
+.is-overlay {
+  z-index: 4;
+  .kws-loader {
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    background: $kws-loader-overlay-background;
+    z-index: 3;
+    .hero-body {
+      padding: 0;
     }
   }
-}
+}

package/styles/RangeSlider.scss

@@ -1,3 +1,4 @@
+$kws-theme-colors: $colors !default;
 $kws-slider-radius: $radius !default;
 $kws-slider-track-background: $grey-lighter !default;
 $kws-slider-track-radius: $radius !default;
@@ -222,7 +223,7 @@ $kws-slider-output-radius: $radius !default;
       &.is-large {
         @include slider-size($size-large);
       }
-      @each $name, $pair in $colors {
+      @each $name, $pair in $kws-theme-colors {
         $color: nth($pair, 1);
         $color-invert: nth($pair, 2);
         $color-light: findLightColor($color);

package/styles/Skeleton.scss

@@ -0,0 +1,52 @@
+$kws-theme-colors: $colors !default;
+$kws-skeleton-color: lighten($text, 60%) !default;
+$kws-skeleton-hilight-color: lighten($text, 65%) !default;
+
+.kws-skeleton {
+  width: 100%;
+  line-height: 1;
+  display: inline-block;
+  background-color: $kws-skeleton-color;
+  background-image: linear-gradient(
+    90deg,
+    $kws-skeleton-color,
+    $kws-skeleton-hilight-color,
+    $kws-skeleton-color
+  );
+  background-size: 200px 100%;
+  background-repeat: no-repeat;
+  animation: kws-skeleton-shine 1.2s infinite;
+
+  @each $name, $pair in $kws-theme-colors {
+    $color: nth($pair, 1);
+    $color-light: findLightColor($color);
+    &.is-#{$name} {
+      background-color: $color-light;
+      background-image: linear-gradient(
+        90deg,
+        $color-light,
+        darken($color-light, 10%),
+        $color-light
+      );
+    }
+  }
+
+  &.is-transparent {
+    background-color: transparent;
+    background-image: linear-gradient(
+      90deg,
+      transparent,
+      transparentize($kws-skeleton-hilight-color, 0.6),
+      transparent
+    );
+  }
+}
+
+@keyframes kws-skeleton-shine {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}

package/styles/Timeline.scss

@@ -1,3 +1,4 @@
+$kws-theme-colors: $colors !default;
 $kws-timeline-default-color: $grey !default;
 $kws-timeline-default-color-invert: $light !default;
 
@@ -92,7 +93,7 @@ $kws-timeline-default-color-invert: $light !default;
     top: 0;
   }
 
-  @each $name, $pair in $colors {
+  @each $name, $pair in $kws-theme-colors {
     $color: nth($pair, 1);
     $color-invert: nth($pair, 2);
     &.is-#{$name} {