@kws3/ui 1.5.8 → 1.6.2

package/datagrid/DataSearch/DataSearch.svelte

@@ -18,10 +18,10 @@
 
 -->
 
-<form on:submit|preventDefault={dosearch}>
-  <div class="field has-addons">
+<form class="kws-grid-search" on:submit|preventDefault={dosearch}>
+  <div class="field has-addons outer-level-field">
     {#if hasSearch}
-      <p class="control is-expanded">
+      <div class="control is-expanded main-search">
         <input
           class="input {query != '' && query != undefined
             ? filter_in_use_class
@@ -29,7 +29,7 @@
           type="text"
           {placeholder}
           bind:value={query} />
-      </p>
+      </div>
     {/if}
     {#if hasFilters}
       {#each _filters as filter, i}
@@ -45,18 +45,25 @@
           {filter_label_map} />
       {/each}
     {/if}
-    {#if changed}
-      <p class="control">
-        <button class="button is-danger" type="button" on:click={doresetSearch}>
-          <Icon icon="close" size="small" />
+
+    <div class="field has-addons action-buttons-field">
+      {#if changed}
+        <div class="control is-expanded clear-search">
+          <button
+            class="button is-danger"
+            type="button"
+            on:click={doresetSearch}>
+            <Icon icon="close" size="small" />
+            <span class="is-hidden-desktop is-hidden-tablet">Clear</span>
+          </button>
+        </div>
+      {/if}
+      <div class="control is-expanded search-submit">
+        <button class="button is-primary" type="submit">
+          <Icon icon="search" size="small" /> <span>Search</span>
         </button>
-      </p>
-    {/if}
-    <p class="control">
-      <button class="button is-primary" type="submit">
-        <Icon icon="search" size="small" /> <span>Search</span>
-      </button>
-    </p>
+      </div>
+    </div>
   </div>
 </form>
 

package/datagrid/DataSearch/SearchFilter.svelte

@@ -11,7 +11,7 @@
 -->
 
 {#if filter.type == "multiselect"}
-  <div class="control" style={filterWidthStyle}>
+  <div class="control search-control" style={filterWidthStyle}>
     <MultiSelect
       options={sanitizedOptions}
       placeholder={`Any ${name}`}
@@ -23,14 +23,14 @@
       class={hilightClass} />
   </div>
 {:else if filter.type == "date"}
-  <div class="control" style={filterWidthStyle}>
+  <div class="control search-control" style={filterWidthStyle}>
     <Datepicker
       class={hilightClass}
       bind:value={filterVals[filter.name]}
       placeholder="{capitaliseFirstLetter(name)} Date" />
   </div>
 {:else if filter.type == "daterange"}
-  <div class="control" style={filterWidthStyle}>
+  <div class="control search-control" style={filterWidthStyle}>
     <Datepicker
       class={hilightClass}
       bind:value={filterVals[filter.name]}
@@ -38,7 +38,7 @@
       placeholder="{capitaliseFirstLetter(name)} Date Range" />
   </div>
 {:else if filter.options.length > 10}
-  <div class="control" style={filterWidthStyle}>
+  <div class="control search-control" style={filterWidthStyle}>
     <SearchableSelect
       options={sanitizedOptions}
       placeholder={`Any ${name}`}
@@ -49,7 +49,7 @@
   </div>
 {:else}
   <div
-    class="select {hilightClass}"
+    class="select control search-control {hilightClass}"
     style={filterWidthStyle}
     data-cy="select-container">
     <select

package/forms/select/MultiSelect.svelte

@@ -28,6 +28,10 @@ Instead of listing all the selected items inside the input., Default: `false`
   @param {string} [no_options_msg="No matching options"] - Message to display when no matching options are found, Default: `"No matching options"`
   @param {string} [remove_btn_tip="Remove"] - Tooltip text for Remove Item button. This `string` will precede the selected Item Name in the tooltip., Default: `"Remove"`
   @param {string} [remove_all_tip="Remove all"] - Tooltip text for the Clear All button, Default: `"Remove all"`
+  @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
@@ -105,38 +109,41 @@ Default value: `<span>{option[search_key] || option}</span>`
       on:click|stopPropagation={removeAll}
       style={shouldShowClearAll ? "" : "display: none;"} />
   {/if}
-
-  <ul
-    bind:this={dropdown}
-    class="options {single ? 'is-single' : 'is-multi'}"
-    class:hidden={!showOptions}>
-    {#each filteredOptions as option}
-      <li
-        on:mousedown|preventDefault|stopPropagation={() =>
-          handleOptionMouseDown(option)}
-        on:mouseenter|preventDefault|stopPropagation={() => {
-          activeOption = option;
-        }}
-        class:selected={isSelected(option)}
-        class:active={activeOption === option}>
-        <span class="kws-selected-icon"
-          ><Icon icon={selected_icon} size="small" /></span
-        ><!--
-          Slot containing text for each selectable item
-
-          Default value: `<span>{option[search_key] || option}</span>`
-        --><slot
-          search_key={used_search_key}
-          {option}>{option[used_search_key] || option}</slot>
-      </li>
-    {:else}
-      <li class="no-options">{no_options_msg}</li>
-    {/each}
-  </ul>
+  {#if rootContainer}
+    <div class="kws-searchableselect" use:portal={dropdown_portal}>
+      <ul
+        bind:this={dropdown}
+        class="options {single ? 'is-single' : 'is-multi'}"
+        class:hidden={!showOptions}>
+        {#each filteredOptions as option}
+          <li
+            on:mousedown|preventDefault|stopPropagation={() =>
+              handleOptionMouseDown(option)}
+            on:mouseenter|preventDefault|stopPropagation={() => {
+              activeOption = option;
+            }}
+            class:selected={isSelected(option)}
+            class:active={activeOption === option}>
+            <span class="kws-selected-icon"
+              ><Icon icon={selected_icon} size="small" /></span
+            ><!--
+              Slot containing text for each selectable item
+
+              Default value: `<span>{option[search_key] || option}</span>`
+            --><slot
+              search_key={used_search_key}
+              {option}>{option[used_search_key] || option}</slot>
+          </li>
+        {:else}
+          <li class="no-options">{no_options_msg}</li>
+        {/each}
+      </ul>
+    </div>
+  {/if}
 </div>
 
 <script>
-  import { Icon } from "@kws3/ui";
+  import { Icon, portal } from "@kws3/ui";
   import { createEventDispatcher, onMount } from "svelte";
   import { createPopper } from "@popperjs/core";
 
@@ -156,6 +163,8 @@ Default value: `<span>{option[search_key] || option}</span>`
     },
   };
 
+  const rootContainerId = "kws-overlay-root";
+
   /**
    * Value of the Input
    *
@@ -234,6 +243,16 @@ Default value: `<span>{option[search_key] || option}</span>`
    */
   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.
+   *
+   * 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
    */
@@ -247,7 +266,7 @@ Default value: `<span>{option[search_key] || option}</span>`
   }
 
   //ensure we have a root container for all our hoisitng related stuff
-  let rootContainerId = "kws-overlay-root";
+
   let rootContainer = document.getElementById(rootContainerId);
   if (!rootContainer) {
     rootContainer = document.createElement("div");
@@ -255,9 +274,6 @@ Default value: `<span>{option[search_key] || option}</span>`
     document.body.appendChild(rootContainer);
   }
 
-  //this is the container that will hold the dropdown
-  let container;
-
   const fire = createEventDispatcher();
 
   let el, //whole wrapping element
@@ -386,22 +402,7 @@ Default value: `<span>{option[search_key] || option}</span>`
     POPPER && POPPER.update();
   }
 
-  /**
-   * Moves dropdown to rootContainer, so that
-   * overflows etc do not mess with it
-   */
-  function hoistDropdown() {
-    if (!container) {
-      container = document.createElement("div");
-      container.className = "kws-searchableselect";
-      rootContainer.appendChild(container);
-      container.appendChild(dropdown);
-    }
-  }
-
   onMount(() => {
-    hoistDropdown();
-
     POPPER = createPopper(el, dropdown, {
       strategy: "fixed",
       placement: "bottom-start",
@@ -416,10 +417,6 @@ Default value: `<span>{option[search_key] || option}</span>`
 
     return () => {
       POPPER.destroy();
-      //remove hoisted items
-      container &&
-        container.parentNode &&
-        container.parentNode.removeChild(container);
     };
   });
 

package/index.js

@@ -21,6 +21,8 @@ export {
 } from "./helpers/FloatingUI";
 export { default as FloatingUIOutput } from "./helpers/FloatingUI/FloatingUIOutput.svelte";
 export { default as Floatie } from "./helpers/FloatingUI/Floatie.svelte";
+export { portal } from "svelte-portal";
+export { default as Portal } from "svelte-portal";
 
 export { default as ConfirmButton } from "./buttons/ConfirmButton.svelte";
 export { default as DeleteButton } from "./buttons/DeleteButton.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.5.8",
+  "version": "1.6.2",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -25,8 +25,9 @@
   "dependencies": {
     "apexcharts": "^3.32.0",
     "flatpickr": "^4.5.2",
+    "svelte-portal": "^2.1.2",
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "83046c7c9f3208ecace614fe22b152f00248bd06"
+  "gitHead": "7f64ac8547337d2835c5c6fb493f7d05c5451e1c"
 }

package/styles/DataSearch.scss

@@ -0,0 +1,60 @@
+.kws-grid-search {
+  .is-not-in-use {
+  }
+  .is-in-use {
+    border-color: transparentize($success, 0.5);
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.23) !important;
+    z-index: 2;
+  }
+
+  .clear-search {
+    .button {
+      .icon {
+        margin-right: calc(-0.5em - 1px);
+      }
+    }
+  }
+}
+
+@include mobile {
+  .kws-grid-search {
+    .field.outer-level-field {
+      flex-wrap: wrap;
+      .control {
+        margin-bottom: 0.5rem;
+      }
+      .main-search {
+        width: 100%;
+        .input {
+          border-bottom-right-radius: $radius !important;
+          border-top-right-radius: $radius !important;
+        }
+      }
+      .search-control {
+        max-width: 100% !important;
+        width: auto !important;
+        flex-grow: 1;
+        flex-shrink: 1;
+        select {
+          width: 100%;
+        }
+      }
+    }
+    .field.action-buttons-field {
+      width: 100%;
+      .clear-search,
+      .search-submit {
+        .button {
+          width: 100%;
+        }
+      }
+      .clear-search {
+        .button {
+          .icon {
+            margin-right: 0.25em;
+          }
+        }
+      }
+    }
+  }
+}

package/styles/DataSort.scss

@@ -7,7 +7,7 @@
     margin: 0 !important;
     padding: 0.2rem 0;
     &:first-child {
-      padding-left: calc(0.625em - 1px);
+      padding-left: calc(0.625rem - 1px);
       border-radius: 0 0 0 $radius-large;
     }
     &:last-child {
@@ -17,8 +17,8 @@
   .select {
     height: auto;
     select {
-      padding-top: 0.2em;
-      padding-bottom: 0.2em;
+      padding-top: 0.2rem;
+      padding-bottom: 0.2rem;
       border: none;
       background: transparent;
       color: $primary;
@@ -35,3 +35,25 @@
     }
   }
 }
+
+@include mobile {
+  .sorting-filters {
+    margin-top: 0rem;
+    .field {
+      justify-content: center;
+    }
+    .control {
+      &:first-child {
+        border-radius: $radius-large 0 0 $radius-large;
+      }
+      &:last-child {
+        border-radius: 0 $radius-large $radius-large 0;
+        flex-grow: 1;
+        flex-shrink: 1;
+        .select {
+          width: 100%;
+        }
+      }
+    }
+  }
+}

package/styles/Pagination.scss

@@ -8,57 +8,90 @@ $kws-pagination-item-disabled-color: $grey !default;
 $kws-pagination-item-ellipsis-background: $white-bis !default;
 $kws-pagination-item-ellipsis-border-color: $grey-lighter !default;
 $kws-pagination-item-active-background: $success !default;
-$kws-pagination-item-active-color: findColorInvert($kws-pagination-item-active-background) !default;
+$kws-pagination-item-active-color: findColorInvert(
+  $kws-pagination-item-active-background
+) !default;
 
-$kws-pagination-frame-box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1) !default;
+$kws-pagination-frame-box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1),
+  0 0 0 0.0625rem rgba(0, 0, 0, 0.1) !default;
 $kws-pagination-frame-background: linear-gradient(#fff, #fafafa);
 
-
-.pagination{
-  &.is-small{
-    .pagination-previous, .pagination-next, .pagination-link, .pagination-ellipsis{
-      min-height:1.8rem;
+.pagination {
+  &.is-small {
+    .pagination-previous,
+    .pagination-next,
+    .pagination-link,
+    .pagination-ellipsis {
+      min-height: 1.8rem;
     }
   }
-  .pagination-previous, .pagination-next{
-    padding-left:0;
-    padding-right:0;
+  .pagination-previous,
+  .pagination-next {
+    padding-left: 0;
+    padding-right: 0;
   }
-  .pagination-previous, .pagination-next, .pagination-link, .pagination-ellipsis{
-    background:$kws-pagination-item-background;
+  .pagination-previous,
+  .pagination-next,
+  .pagination-link,
+  .pagination-ellipsis {
+    background: $kws-pagination-item-background;
     color: $kws-pagination-item-color;
     border: $kws-pagination-item-border;
-    margin:0;
-    border-radius:0;
-    min-height:100%;
-    margin-left:-1px;
-    &.is-disabled{
-      background:$kws-pagination-item-disabled-background;
-      color:$kws-pagination-item-disabled-color;
+    margin: 0;
+    border-radius: 0;
+    min-height: 100%;
+    margin-left: -1px;
+    &.is-disabled {
+      background: $kws-pagination-item-disabled-background;
+      color: $kws-pagination-item-disabled-color;
     }
-    &:hover{
-      border:$kws-pagination-item-hover-border;
-      color:$kws-pagination-item-hover-color;
+    &:hover {
+      border: $kws-pagination-item-hover-border;
+      color: $kws-pagination-item-hover-color;
     }
   }
-  .pagination-ellipsis{
-    background:$kws-pagination-item-ellipsis-background;
-    border-color:$kws-pagination-item-ellipsis-border-color;
+  .pagination-ellipsis {
+    background: $kws-pagination-item-ellipsis-background;
+    border-color: $kws-pagination-item-ellipsis-border-color;
   }
-  .pagination-link.is-current{
-    text-shadow:none;
+  .pagination-link.is-current {
+    text-shadow: none;
     color: $kws-pagination-item-active-color;
     background: $kws-pagination-item-active-background;
     border-color: $kws-pagination-item-active-background;
   }
-  .pagination-list{
-    &.pagination-limit-chooser{
-      order:inherit;
+  .pagination-list {
+    &.pagination-limit-chooser {
+      order: inherit;
     }
   }
 }
-.pagination_frame.has-frame{
-  padding:0.625rem;
+.pagination_frame.has-frame {
+  padding: 0.625rem;
   box-shadow: $kws-pagination-frame-box-shadow;
   background: $kws-pagination-frame-background;
-}
+}
+
+@include mobile {
+  .pagination_frame {
+    .level {
+      display: flex;
+      flex-wrap: wrap;
+      .level-right {
+        margin-top: 0.75rem;
+        flex-basis: 100%;
+      }
+    }
+    .pagination-showing {
+      margin-bottom: 0;
+    }
+    .pagination {
+      .pagination-previous,
+      .pagination-next,
+      .pagination-link,
+      .pagination-ellipsis {
+        margin: 0.25rem;
+      }
+    }
+  }
+}

package/styles/Select.scss

@@ -11,6 +11,13 @@ $kws-select-selecting-background: $primary !default;
 $kws-select-selected-color: $primary-dark !default;
 $kws-select-selected-background: $primary-light !default;
 
+$__modal-z: 41 !default;
+@if $modal-z {
+  $__modal-z: $modal-z;
+}
+
+$kws-select-options-z-index: $__modal-z + 1 !default;
+
 .kws-searchableselect {
   position: relative;
   align-items: center;
@@ -205,5 +212,6 @@ $kws-select-selected-background: $primary-light !default;
 #kws-overlay-root {
   .kws-searchableselect {
     position: absolute;
+    z-index: $kws-select-options-z-index;
   }
 }