@kws3/ui 1.6.3 → 1.6.7

package/datagrid/DataSearch/DataSearch.svelte

@@ -166,6 +166,15 @@
       qfilters[qqp[0]] = qqp[1];
     }
 
+    if (hasFilters) {
+      for (let i in _filters) {
+        let filter = _filters[i];
+        if (typeof qfilters[filter.name] == "undefined") {
+          qfilters[filter.name] = "";
+        }
+      }
+    }
+
     filterVals = qfilters;
   }
 
@@ -186,7 +195,7 @@
     let ret = [];
     ret.push(query);
     for (var i in filterVals) {
-      ret.push(i + ":" + filterVals[i]);
+      filterVals[i] && ret.push(i + ":" + filterVals[i]);
     }
     /**
      * Event triggered on search

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/forms/select/MultiSelect.svelte

@@ -242,7 +242,6 @@ Default value: `<span>{option[search_key] || option}</span>`
    * Tooltip text for the Clear All button
    */
   export let remove_all_tip = "Remove all";
-
   /**
    * Where to render the dropdown list.
    * Can be a DOM element or a `string` with the CSS selector of the element.

package/forms/select/SearchableSelect.svelte

@@ -20,6 +20,10 @@ this property of each object will be returned as the value, Default: `"id"`
   @param {string} [selected_icon="check"] - Icon used to mark selected items in dropdown list, Default: `"check"`
   @param {string} [no_options_msg="No matching options"] - Message to display when no matching options are found, Default: `"No matching options"`
   @param {string} [remove_all_tip="Clear Selection"] - Tooltip text for the Clear selection button, Default: `"Clear Selection"`
+  @param {HTMLElement|string} [dropdown_portal=undefined] - Where to render the dropdown list.
+Can be a DOM element or a `string` with the CSS selector of the element.
+
+By default it renders in a custom container appended to `document.body`., Default: `undefined`
   @param {string} [class=""] - CSS classes for input container, Default: `""`
 
   ### Events
@@ -48,6 +52,7 @@ Default value: `<span>{option[search_key] || option}</span>`
   {selected_icon}
   {remove_all_tip}
   {no_options_msg}
+  {dropdown_portal}
   on:change={change}
   on:blur={blur}
   let:option
@@ -67,6 +72,8 @@ Default value: `<span>{option[search_key] || option}</span>`
 
   const fire = createEventDispatcher();
 
+  const rootContainerId = "kws-overlay-root";
+
   /**
    * Value of the Input
    *
@@ -127,6 +134,15 @@ Default value: `<span>{option[search_key] || option}</span>`
    * Tooltip text for the Clear selection button
    */
   export let remove_all_tip = "Clear Selection";
+  /**
+   * Where to render the dropdown list.
+   * Can be a DOM element or a `string` with the CSS selector of the element.
+   *
+   * By default it renders in a custom container appended to `document.body`.
+   *
+   * @type { HTMLElement|string}
+   */
+  export let dropdown_portal = "#" + rootContainerId;
 
   /**
    * CSS classes for input container

package/helpers/Popover.svelte

@@ -7,11 +7,14 @@
   @param {''|'small'|'medium'|'large'} [icon_size="small"] - Size of the trigger icon displayed when default slot has no content, Default: `"small"`
   @param {string} [trigger="click"] - Determines the events that cause the Popover to show. Multiple event names are separated by spaces.
 
-**Examples:** `click`, `mouseenter`, `mouseenter focus`, Default: `"click"`
+**Examples:** `click`, `mouseenter`, `mouseenter focus`
+
+If you would like to trigger the popover programatically only, you can use `manual`., Default: `"click"`
   @param {string} [placement="auto"] - Preferred placement of the Popover
 
 Available options: <a target="_blank" href="https://atomiks.github.io/tippyjs/v6/all-props/#placement">https://atomiks.github.io/tippyjs/v6/all-props/#placement</a>, Default: `"auto"`
   @param {boolean} [interactive=false] - Allows you to interact with the Popover content, when turned on, Default: `false`
+  @param {boolean} [hide_on_click=true] - Whether the popover should hide on clicking outside of it, Default: `true`
   @param {object} [external_target=null] - Specify a target node reference to use as the Popover content
 
 When set to `null`, it will use the content of the `popover` slot, Default: `null`
@@ -20,6 +23,18 @@ 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
+
+  ### Events
+  - `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
   - `<slot name="default"  />` - Content of the Popover Trigger, by default it displays an Icon
@@ -28,11 +43,18 @@ 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}
   data-tippy-placement={placement}
   data-tippy-offset="[0, 10]"
   data-tippy-interactive={interactive ? "true" : "false"}
   data-tippy-maxWidth={max_width}
+  data-tippy-hideOnClick={hide_on_click ? "true" : "false"}
   style={_style}
   class={klass}>
   <!--Content of the Popover Trigger, by default it displays an Icon--><slot
@@ -51,8 +73,12 @@ It can be any CSS value associated with `max-width` property, including `"none"`
 </style>
 
 <script>
+  import { createEventDispatcher } from "svelte";
   import { popover } from "./Tooltip";
   import { Icon } from "@kws3/ui";
+
+  const fire = createEventDispatcher();
+
   /**
    * Icon used when default slot has no content
    */
@@ -71,6 +97,8 @@ It can be any CSS value associated with `max-width` property, including `"none"`
    * Determines the events that cause the Popover to show. Multiple event names are separated by spaces.
    *
    * **Examples:** `click`, `mouseenter`, `mouseenter focus`
+   *
+   * If you would like to trigger the popover programatically only, you can use `manual`.
    */
   export let trigger = "click";
   /**
@@ -83,6 +111,10 @@ It can be any CSS value associated with `max-width` property, including `"none"`
    * Allows you to interact with the Popover content, when turned on
    */
   export let interactive = false;
+  /**
+   * Whether the popover should hide on clicking outside of it
+   */
+  export let hide_on_click = true;
   /**
    * Specify a target node reference to use as the Popover content
    *
@@ -106,7 +138,66 @@ It can be any CSS value associated with `max-width` property, including `"none"`
   let klass = "";
   export { klass as class };
 
-  let popoverNode;
+  let popoverNode, popoverParent;
+
+  const getInstance = () => {
+    return popoverParent._tippy;
+  };
+
+  export function open() {
+    getInstance().show();
+  }
+
+  export function close() {
+    getInstance().hide();
+  }
+
+  export function enable() {
+    getInstance().enable();
+  }
+
+  export function disable() {
+    getInstance().disable();
+  }
+
+  export function setProps(props) {
+    getInstance().setProps(props);
+  }
+
+  const popoverShowing = ({ detail }) => {
+    /**
+     * Triggered when popover is opening
+     */
+    fire("opening", detail);
+  };
+
+  const popoverShown = ({ detail }) => {
+    /**
+     * Triggered when popover is opened
+     */
+    fire("open", detail);
+  };
+
+  const popoverHiding = ({ detail }) => {
+    /**
+     * Triggered when popover is closing
+     */
+    fire("closing", detail);
+  };
+
+  const popoverHidden = ({ detail }) => {
+    /**
+     * Triggered when popover is closed
+     */
+    fire("close", detail);
+  };
+
+  const popoverTriggered = ({ detail }) => {
+    /**
+     * Triggered when popover is triggered either programatically or by user interaction
+     */
+    fire("trigger", detail);
+  };
 
   $: _style = `cursor:pointer;${style}`;
   $: targetNode = external_target ? external_target : popoverNode;

package/helpers/Tooltip.js

@@ -29,7 +29,23 @@ function createTippyAction(defaultOpts) {
     let instance;
 
     function makeOptions() {
-      return Object.assign({}, defaultOpts, opts);
+      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) {
+          dispatch("triggered", { instance });
+        },
+      });
     }
 
     function remakeInstance() {
@@ -51,6 +67,11 @@ function createTippyAction(defaultOpts) {
 
     makeInstance();
 
+    function dispatch(type, detail) {
+      const e = new CustomEvent(type, { bubbles: false, detail });
+      node.dispatchEvent(e);
+    }
+
     return {
       update(_opts) {
         opts = _opts;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.6.3",
+  "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": "a84e962f160c41cdcc6c2b7827b815d1f1b63e05"
+  "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;
+    }
+  }
 }