@kws3/ui 1.5.5 → 1.5.9

package/datagrid/DataSearch/DataSearch.svelte

@@ -106,19 +106,24 @@
 
   let query = "",
     _filters = [],
-    filterVals = {};
+    filterVals = {},
+    filterWidthStyle = "";
 
   $: usedFilterComponent = filterComponent ? filterComponent : SearchFilter;
-  $: filterWidthStyle = hasSearch
-    ? `max-width:${(1 / (_filters.length + 2)) * 100}%`
-    : "";
   $: changed = q && q.trim() != "";
   $: q, qHasChanged();
   $: filters, filtersHaveChanged();
 
+  function calculateMaxWidths() {
+    filterWidthStyle = hasSearch
+      ? `max-width:${(1 / (_filters.length + 2)) * 100}%`
+      : "";
+  }
+
   function filtersHaveChanged() {
     if (filters) {
       _filters = [];
+      let temp = [];
       for (let i in filters) {
         let obj = { name: i, options: [], type: "select" };
         if (Array.isArray(filters[i])) {
@@ -131,9 +136,12 @@
             obj.type = filters[i].type;
           }
         }
-        _filters.push(obj);
+        temp.push(obj);
       }
+      _filters = temp;
     }
+
+    calculateMaxWidths();
   }
 
   function qHasChanged() {

package/datagrid/Pagination/Pagination.svelte

@@ -47,7 +47,7 @@
       {:else}
         <div class="level-item">
           {#if showTotal}
-            <strong>Total {meta.total} {entityName}</strong>
+            <strong>Total {totalItems} {entityName}</strong>
           {:else if showCurrent}
             {#if meta.total > 0}Showing {meta.offset * 1 + 1} to {meta.offset *
                 1 +
@@ -72,12 +72,12 @@
           {/if}
         {/if}
         {#if showTotal}
-          <strong>{meta.total} {entityName}</strong>
+          <strong>{totalItems} {entityName}</strong>
         {/if}
       </div>
     {:else if showPerPage && showTotal && !showCurrent}
       <div class="level-item pagination-showing">
-        <strong>Total {meta.total} {entityName}</strong>
+        <strong>Total {totalItems} {entityName}</strong>
       </div>
     {/if}
 
@@ -204,6 +204,7 @@
     _perPageOptions = ret;
   }
 
+  $: totalItems = meta && meta.total ? meta.total : 0;
   $: currentPage = Math.floor(meta.offset / meta.limit);
   $: totalPages = Math.ceil(meta.total / (meta.limit || 1));
   $: totalPages, currentPage, breakThreshold, calculatePages();

package/forms/select/MultiSelect.svelte

@@ -73,6 +73,7 @@ Default value: `<span>{option[search_key] || option}</span>`
             {#if !readonly && !disabled}
               <button
                 on:click|self|stopPropagation={() => remove(tag)}
+                role="button"
                 type="button"
                 class="delete is-small"
                 data-tooltip="{remove_btn_tip} {tag[used_search_key]}" />
@@ -97,6 +98,7 @@ Default value: `<span>{option[search_key] || option}</span>`
   </ul>
   {#if !readonly && !disabled}
     <button
+      role="button"
       type="button"
       class="remove-all delete is-small"
       data-tooltip={remove_all_tip}

package/helpers/Nl2br.svelte

@@ -16,5 +16,5 @@
    * Text to process and output
    */
   export let text = "";
-  $: text_parts = text.split("\n");
+  $: text_parts = text && typeof text == "string" ? text.split("\n") : "";
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "1.5.5",
+  "version": "1.5.9",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -28,5 +28,5 @@
     "text-mask-core": "^5.1.2",
     "tippy.js": "^6.3.1"
   },
-  "gitHead": "49d3b7b20b12fea5110db28ec4be8ed8562d4e36"
+  "gitHead": "6705334ff3fa5284eb9c6610eb0e0a23e9ac5534"
 }

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;
   }
 }