@kws3/ui 4.5.7 → 4.5.9

package/CHANGELOG.mdx

@@ -1,3 +1,11 @@
+## 4.5.9
+ - Remove left border radius on search button in `DataSearch`
+ - `FileUpload` Fix file name not populated in `getFile()`
+ - Fix form comparator so that new or removed object keys trigger `touched`
+
+## 4.5.8
+ - `MultiSelect` Stop overwriting options prop in async mode
+
 ## 4.5.7
  - Fix SCSS deprecation warnings
 

package/controls/FileUpload.svelte

@@ -158,7 +158,8 @@ The following functions are returned in `event.detail`:
     _uploaded = 0,
     uploadInput,
     uploadField,
-    formData;
+    formData,
+    name = "";
 
   let fileTypes, _progress, maxFileSize;
 
@@ -311,6 +312,7 @@ The following functions are returned in `event.detail`:
 
     if (valid) {
       _total = size;
+      name = file.name;
       formData.append("userfile", file);
       /**
        * Triggered when file is chosen by user.

package/datagrid/DataSearch/DataSearch.svelte

@@ -46,7 +46,7 @@
       {/each}
     {/if}
 
-    <div class="field has-addons action-buttons-field">
+    <div class="field has-addons control action-buttons-field">
       {#if changed}
         <div class="control is-expanded clear-search">
           <button

package/form/index.js

@@ -40,6 +40,12 @@ const formMaker = (config) => {
      * @returns
      */
     let compare = (field, oldData, newData) => {
+      if (typeof oldData === "undefined" && typeof newData !== "undefined") {
+        return true;
+      }
+      if (typeof newData === "undefined" && typeof oldData !== "undefined") {
+        return true;
+      }
       if (Array.isArray(newData[field])) {
         if (
           !Array.isArray(oldData[field]) ||
@@ -131,7 +137,7 @@ const formMaker = (config) => {
   });
 
   const isValid = derived(errors, ($errors) =>
-    Object.values($errors).every((v) => v === "")
+    Object.values($errors).every((v) => v === ""),
   );
 
   /** @param {{ [key: string]: any }} newData */

package/forms/select/MultiSelect.svelte

@@ -566,7 +566,12 @@ Default value: `<span>{option[search_key] || option}</span>`
       if (asyncMode) {
         // initally on async mode options are empty
         // so we need to fill selectedOptions with value if value is avaliable
-        options = value ? [...(single ? [value] : [...value])] : [];
+        options =
+          options && options.length
+            ? options
+            : value
+              ? [...(single ? [value] : [...value])]
+              : [];
         searching = false;
         tick().then(() => {
           normaliseOptions();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "4.5.7",
+  "version": "4.5.9",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "scripts": {
@@ -67,5 +67,5 @@
   "devDependencies": {
     "typescript": "^5.2.2"
   },
-  "gitHead": "ac1f52cbab18e465f845a3366f6b13a00ce331c0"
+  "gitHead": "d8d7a136c4f8eedceea82b98a46e0dd363b267ca"
 }

package/styles/Tooltip.scss

@@ -49,6 +49,14 @@ $popover-radius: $radius !default;
   $placements: "top", "bottom", "left", "right";
   $origins: bottom, top, right, left;
 
+  position: relative;
+  background-color: $background;
+  color: $color;
+  border-radius: $radius;
+  outline: 0;
+  box-shadow: $shadow;
+  transition-property: transform, visibility, opacity;
+
   &[data-animation="scale"] {
     @each $placement in $placements {
       &[data-placement^="#{$placement}"] {
@@ -69,14 +77,6 @@ $popover-radius: $radius !default;
     opacity: 0;
   }
 
-  position: relative;
-  background-color: $background;
-  color: $color;
-  border-radius: $radius;
-  outline: 0;
-  box-shadow: $shadow;
-  transition-property: transform, visibility, opacity;
-
   @each $name, $pair in $theme-colors {
     &[data-theme~="#{$name}"] {
       color: cv.getVar($name, "", "-invert");