@kws3/ui 1.6.9 → 1.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.6.9",
+  "version": "1.7.2",
   "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": "227e2a0e081adad79a4a46096d1f846bd307d6e3"
 }

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/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/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} {

package/utils/index.js

@@ -19,7 +19,7 @@ export var rAF =
   window.mozRequestAnimationFrame ||
   window.oRequestAnimationFrame ||
   window.msRequestAnimationFrame ||
-  function (callback, element) {
+  function (callback) {
     window.setTimeout(callback, 1000 / 60);
   };
 

package/utils/keyboard-events.js

@@ -9,7 +9,7 @@ let events = [
   {name: 'uparrow', code: 38},
   {name: 'backspace', code: 8},
   {name: 'del', code: 46},
-]
+];
 
 export function keyboardEvents(node) {
   function keydownHandler(event) {
@@ -20,7 +20,7 @@ export function keyboardEvents(node) {
           new CustomEvent(name)
         );
       }
-    })
+    });
   }
   node.addEventListener('keydown', keydownHandler, false);
 
@@ -29,4 +29,4 @@ export function keyboardEvents(node) {
       node.removeEventListener('keydown', keydownHandler, false);
     }
   };
-};
+}