@kws3/ui 1.7.0 → 1.7.3

package/sliding-panes/SlidingPane.svelte

@@ -18,24 +18,40 @@ This will work only when `track_height` is set to `true`
   - `<slot name="default"  />` - Used to display content
 
 -->
-<div
-  bind:clientHeight={_height}
-  class="sliding-pane {v_center ? 'v-centered' : ''} {h_center
-    ? 'h-centered'
-    : ''} {active ? 'is-active' : ''} {klass}"
-  {style}>
+{#if hasResizeObserver}
   <div
-    bind:this={slideInner}
-    class="sliding-pane-inner {v_center ? 'v-centered' : ''} {h_center
-      ? 'h-centered'
-      : ''}">
-    <!--Used to display content--><slot />
+    class="sliding-pane with-resize-observer {v_center
+      ? 'v-centered'
+      : ''} {h_center ? 'h-centered' : ''} {active ? 'is-active' : ''} {klass}"
+    {style}>
+    <div
+      bind:this={slideInner}
+      class="sliding-pane-inner {v_center ? 'v-centered' : ''} {h_center
+        ? 'h-centered'
+        : ''}">
+      <!--Used to display content--><slot />
+    </div>
   </div>
-</div>
+{:else}
+  <div
+    bind:clientHeight={_height}
+    class="sliding-pane with-legacy-observer {v_center
+      ? 'v-centered'
+      : ''} {h_center ? 'h-centered' : ''} {active ? 'is-active' : ''} {klass}"
+    {style}>
+    <div
+      bind:this={slideInner}
+      class="sliding-pane-inner {v_center ? 'v-centered' : ''} {h_center
+        ? 'h-centered'
+        : ''}">
+      <!--Used to display content--><slot />
+    </div>
+  </div>
+{/if}
 
 <script>
   import { onMount, createEventDispatcher } from "svelte";
-  import { rAF } from "../utils";
+  import { debounce } from "@kws3/ui/utils";
 
   const fire = createEventDispatcher();
 
@@ -60,7 +76,8 @@ This will work only when `track_height` is set to `true`
      */
     track_height = true;
 
-  let _height, slideInner;
+  const hasResizeObserver = typeof window.ResizeObserver != "undefined";
+  let _height, slideInner, Observer;
 
   /**
    * CSS classes for the panel
@@ -68,15 +85,9 @@ This will work only when `track_height` is set to `true`
   let klass = "";
   export { klass as class };
 
-  onMount(() => {
-    pollForRender();
-  });
-
   $: {
     if (active && track_height && (active || _height)) {
-      rAF(() => {
-        fireSizeChange();
-      });
+      fireSizeChange();
     }
   }
 
@@ -86,11 +97,12 @@ This will work only when `track_height` is set to `true`
     } else {
       setTimeout(() => {
         pollForRender();
-      }, 200);
+      }, 50);
     }
   }
 
   function init() {
+    setupResizeObserver();
     fireSizeChange();
   }
 
@@ -99,21 +111,41 @@ This will work only when `track_height` is set to `true`
       if (!slideInner || typeof slideInner == "undefined") {
         pollForRender();
       } else {
-        rAF(() => {
-          if (!slideInner || typeof slideInner == "undefined") {
-            return;
-          }
-          var h1 = slideInner.scrollHeight,
-            h2 = slideInner.clientHeight;
-          var new_height = Math.max(h1, h2);
-          /**
-           * Event fired when the height of the pane changes
-           *
-           * This will work only when `track_height` is set to `true`
-           */
-          fire("heightChange", { height: new_height });
-        });
+        if (!slideInner || typeof slideInner == "undefined") {
+          return;
+        }
+        var h1 = slideInner.scrollHeight,
+          h2 = slideInner.clientHeight;
+        var new_height = Math.max(h1, h2);
+        /**
+         * Event fired when the height of the pane changes
+         *
+         * This will work only when `track_height` is set to `true`
+         */
+        fire("heightChange", { height: new_height });
       }
     }
   }
+
+  const debouncedFireSizeChange = debounce(fireSizeChange, 150, false);
+
+  const setupResizeObserver = () => {
+    if (hasResizeObserver) {
+      if (!slideInner || typeof slideInner == "undefined") {
+        pollForRender();
+      } else {
+        Observer = new ResizeObserver(() => {
+          debouncedFireSizeChange();
+        });
+        Observer.observe(slideInner);
+      }
+    }
+  };
+
+  onMount(() => {
+    pollForRender();
+    return () => {
+      Observer && Observer.disconnect();
+    };
+  });
 </script>

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/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);
     }
   };
-};
+}