@kws3/ui 4.2.1 → 4.3.0

package/CHANGELOG.mdx

@@ -1,5 +1,14 @@
+## 4.3.0
+  - `StickyColumnsTableWrapper` now includes a box shadow to compensate for the inner table's drop shadow being hidden due to overflow clipping. 
+  - **[BREAKING]** `GridView` component now transitions each `GridCell` independently, previously used to transition each `GridRow`. This means all content in `GridCell` no includes an additional wrapper element for handling the transitions. This matches the behaviour in `TileView`.
+
+## 4.2.5
+  - Fix z-index for sticky columns
+  - Allow `inner_class` in `InfiniteList` component
+  - Configurable scroll shadows on `InfiniteList` defaulting to a radial scroll shadow
+
 ## 4.2.1
-  - Fix grid row hover statecolors for sticky columns
+  - Fix grid row hover state colors for sticky columns
 
 ## 4.2.0
   - Fix grid row transitions to be global

package/datagrid/GridView/GridCell.svelte

@@ -11,11 +11,14 @@
 -->
 
 <td class={classNames(column, row)} style={styles(column, row)}>
-  <!--  eslint-disable-next-line svelte/no-at-html-tags -->
-  {@html transforms(column, row)}
+  <Transition {transition} x={20} delay={20 * row_index}>
+    <!--  eslint-disable-next-line svelte/no-at-html-tags -->
+    {@html transforms(column, row)}
+  </Transition>
 </td>
 
 <script>
+  import { Transition } from "@kws3/ui";
   /**
    * Name of the column in the DB
    */
@@ -38,5 +41,7 @@
      * Finds CSS styles for the column
      * @type {object}
      */
-    styles = {};
+    styles = {},
+    row_index = 0,
+    transition = false;
 </script>

package/datagrid/GridView/GridRow.svelte

@@ -28,7 +28,6 @@
 -->
 {#if transition}
   <tr
-    in:fly|global={{ x: 20, delay: 25 * row_index }}
     on:click|stopPropagation={rowClick}
     class:is-selected={activated && visualActivationOnClick}
     class:is-checked={checked}>
@@ -38,13 +37,15 @@
         on:click={(e) => {
           clickableRows && e.stopImmediatePropagation();
         }}>
-        <Checkbox
-          size={selectCheckboxSize}
-          color={selectCheckboxColor}
-          style="margin:0;"
-          inverted={false}
-          bind:checked
-          on:change={changed} />
+        <div in:fly|global={{ x: 20, delay: 25 * row_index }}>
+          <Checkbox
+            size={selectCheckboxSize}
+            color={selectCheckboxColor}
+            style="margin:0;"
+            inverted={false}
+            bind:checked
+            on:change={changed} />
+        </div>
       </td>
     {/if}
     {#each column_keys as column}
@@ -56,7 +57,9 @@
           {row}
           {transforms}
           {classNames}
-          {styles} />
+          {styles}
+          {row_index}
+          {transition} />
       {/if}
     {/each}
   </tr>
@@ -67,13 +70,15 @@
     class:is-checked={checked}>
     {#if bulk_actions}
       <td style="vertical-align:middle;">
-        <Checkbox
-          size={selectCheckboxSize}
-          color={selectCheckboxColor}
-          style="margin:0;"
-          inverted={false}
-          bind:checked
-          on:change={changed} />
+        <div>
+          <Checkbox
+            size={selectCheckboxSize}
+            color={selectCheckboxColor}
+            style="margin:0;"
+            inverted={false}
+            bind:checked
+            on:change={changed} />
+        </div>
       </td>
     {/if}
     {#each column_keys as column}

package/helpers/InfiniteList.svelte

@@ -6,8 +6,11 @@
   @param {object} [iteration_key=null] - Iteration key - by default it uses the index of the array inside the keyed each block, Default: `null`
   @param {string} [height="100%"] - Height of the wrapper, CSS String, Default: `"100%"`
   @param {number} [end_offset=400] - `end` event will be fired when the scroll position reaches this many pixels from the end of the list., Default: `400`
-  @param {string} [style=""] - Inline CSS for scroller container, Default: `""`
-  @param {string} [class=""] - CSS classes for scroller container, Default: `""`
+  @param {string} [style=""] - Inline CSS for component container, Default: `""`
+  @param {string} [inner_class=""] - CSS classes for inner scroller container, Default: `""`
+  @param {boolean} [linear_scroll_shadow=false] - Modify the look of scroll shadows from radial to linear, Default: `false`
+  @param {string} [class=""] - CSS classes for component container, Default: `""`
+  @method `relayout()` - Relayout method
 
   ### Events
   - `end` - Fired when the scroll position reaches `end_offset` pixels from the end of the list.
@@ -22,11 +25,12 @@ while more items are loading
   <div
     bind:this={viewport}
     class="kws-infinite-list with-resize-observer {klass}"
+    class:linear_scroll_shadow
     style="height:{height};{style}"
     use:resizeObserver
     on:resize={resize}>
     <div
-      class="kws-infinite-list-inner"
+      class="kws-infinite-list-inner {inner_class}"
       on:scroll={handle_scroll}
       bind:this={contents}>
       {#each visible as item (item.index)}
@@ -54,10 +58,11 @@ while more items are loading
   <div
     bind:this={viewport}
     class="kws-infinite-list {klass}"
+    class:linear_scroll_shadow
     style="height:{height};{style}"
     bind:offsetHeight={viewportHeight}>
     <div
-      class="kws-infinite-list-inner"
+      class="kws-infinite-list-inner {inner_class}"
       on:scroll={handle_scroll}
       bind:this={contents}>
       {#each visible as item (item.index)}
@@ -108,14 +113,15 @@ while more items are loading
   .fake-shadow-contraint .fake-inner-shadow {
     position: absolute;
     left: 0;
-    top: -1px;
+    top: 0;
     width: 100%;
-    height: 1px;
-    box-shadow:
-      0 0 6px 0 #000,
-      0 0 12px 0 #000,
-      0 0 18px 0 #000,
-      0 0 20px 0 #000;
+    height: 100%;
+    background: radial-gradient(
+        farthest-side at 50% 0,
+        rgba(0, 0, 0, 0.2),
+        rgba(0, 0, 0, 0)
+      )
+      center top;
   }
 
   .fake-shadow-contraint.bottom {
@@ -125,7 +131,23 @@ while more items are loading
 
   .fake-shadow-contraint.bottom .fake-inner-shadow {
     top: auto;
-    bottom: -1px;
+    bottom: 0;
+    background: radial-gradient(
+        farthest-side at 50% 100%,
+        rgba(0, 0, 0, 0.2),
+        rgba(0, 0, 0, 0)
+      )
+      center bottom;
+  }
+
+  .linear_scroll_shadow .fake-shadow-contraint .fake-inner-shadow {
+    height: 1px;
+    box-shadow:
+      0 0 6px 0 #000,
+      0 0 12px 0 #000,
+      0 0 18px 0 #000,
+      0 0 20px 0 #000;
+    background: none;
   }
 </style>
 
@@ -152,12 +174,20 @@ while more items are loading
      */
     end_offset = 400,
     /**
-     * Inline CSS for scroller container
+     * Inline CSS for component container
+     */
+    style = "",
+    /**
+     * CSS classes for inner scroller container
+     */
+    inner_class = "",
+    /**
+     * Modify the look of scroll shadows from radial to linear
      */
-    style = "";
+    linear_scroll_shadow = false;
 
   /**
-   * CSS classes for scroller container
+   * CSS classes for component container
    */
   let klass = "";
   export { klass as class };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "4.2.1",
+  "version": "4.3.0",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "svelte": "index.js",
@@ -35,5 +35,5 @@
   "devDependencies": {
     "typescript": "^5.2.2"
   },
-  "gitHead": "55ca8e53d4eb3648df52466a8cb45ae645084c9a"
+  "gitHead": "be0c7f1fb751590c95f9aad9ff240292e34d5386"
 }

package/styles/Grid.scss

@@ -86,6 +86,7 @@ $kws-gridview-even-row-hover-background-color: $table-striped-row-even-hover-bac
 }
 .kws-sticky-columns-table-wrapper {
   position: relative;
+  box-shadow: $kws-gridview-box-shadow;
 
   .data-table {
     margin-bottom: 1.5rem;
@@ -137,8 +138,10 @@ $kws-gridview-even-row-hover-background-color: $table-striped-row-even-hover-bac
     }
     td,
     th {
+      overflow: hidden;
       &.is-sticky-column {
         position: sticky;
+        z-index: 2;
         &:first-child {
           left: 0;
         }