@kws3/ui 1.6.6 → 1.6.7

package/datagrid/GridView/GridRow.svelte

@@ -29,7 +29,8 @@
   <tr
     in:fly={{ x: 20, delay: 25 * row_index }}
     on:click|stopPropagation={rowClick}
-    class:is-selected={rowActive}>
+    class:is-selected={rowActive}
+    class:is-checked={checked}>
     {#if bulk_actions}
       <td style="vertical-align:middle;">
         <Checkbox
@@ -55,7 +56,10 @@
     {/each}
   </tr>
 {:else}
-  <tr on:click|stopPropagation={rowClick} class:is-selected={rowActive}>
+  <tr
+    on:click|stopPropagation={rowClick}
+    class:is-selected={rowActive}
+    class:is-checked={checked}>
     {#if bulk_actions}
       <td style="vertical-align:middle;">
         <Checkbox

package/helpers/Popover.svelte

@@ -30,8 +30,10 @@ It can be any CSS value associated with `max-width` property, including `"none"`
   @param {function} [setProps(props)] - SetProps function
 
   ### Events
-  - `open` - Triggered when popoper is shown
-  - `close` - Triggered when popoper is hidden
+  - `opening` - Triggered when popover is opening
+  - `open` - Triggered when popover is opened
+  - `closing` - Triggered when popover is closing
+  - `close` - Triggered when popover is closed
   - `trigger` - Triggered when popover is triggered either programatically or by user interaction
 
   ### Slots
@@ -42,7 +44,9 @@ It can be any CSS value associated with `max-width` property, including `"none"`
 <span
   use:popover={{ content: targetNode }}
   bind:this={popoverParent}
+  on:showing={popoverShowing}
   on:shown={popoverShown}
+  on:hiding={popoverHiding}
   on:hidden={popoverHidden}
   on:triggered={popoverTriggered}
   data-tippy-trigger={trigger}
@@ -160,16 +164,30 @@ It can be any CSS value associated with `max-width` property, including `"none"`
     getInstance().setProps(props);
   }
 
+  const popoverShowing = ({ detail }) => {
+    /**
+     * Triggered when popover is opening
+     */
+    fire("opening", detail);
+  };
+
   const popoverShown = ({ detail }) => {
     /**
-     * Triggered when popoper is shown
+     * Triggered when popover is opened
      */
     fire("open", detail);
   };
 
+  const popoverHiding = ({ detail }) => {
+    /**
+     * Triggered when popover is closing
+     */
+    fire("closing", detail);
+  };
+
   const popoverHidden = ({ detail }) => {
     /**
-     * Triggered when popoper is hidden
+     * Triggered when popover is closed
      */
     fire("close", detail);
   };

package/helpers/Tooltip.js

@@ -31,9 +31,15 @@ function createTippyAction(defaultOpts) {
     function makeOptions() {
       return Object.assign({}, defaultOpts, opts, {
         onShow(instance) {
+          dispatch("showing", { instance });
+        },
+        onShown(instance) {
           dispatch("shown", { instance });
         },
         onHide(instance) {
+          dispatch("hiding", { instance });
+        },
+        onHidden(instance) {
           dispatch("hidden", { instance });
         },
         onTrigger(instance) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "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": "0f6862d3aefc099de5ccc7df5eaca60c47bbcdab"
+  "gitHead": "12e85eba3be37c2d133c8ac047e4dbf651378c18"
 }

package/styles/Grid.scss

@@ -4,12 +4,14 @@ $kws-gridview-th-background: $table-background-color !default;
 $kws-gridview-th-color: $text !default;
 $kws-gridview-tag-margin: 0 0.125rem 0.125rem 0 !default;
 $kws-gridview-icon-size: 1.5em !default;
+$kws-gridview-checked-row-background: $primary-light !default;
 
 .data-table .table {
   box-shadow: $kws-gridview-box-shadow;
   th {
     background: $kws-gridview-th-background;
     color: $kws-gridview-th-color;
+    vertical-align: middle;
   }
   &.is-bordered {
     tr {
@@ -43,4 +45,11 @@ $kws-gridview-icon-size: 1.5em !default;
       cursor: pointer;
     }
   }
+
+  tr.is-checked {
+    background-color: $kws-gridview-checked-row-background !important;
+    td {
+      background-color: $kws-gridview-checked-row-background !important;
+    }
+  }
 }